jquery menukar saiz imej

jQuery ialah perpustakaan JavaScript yang memudahkan traversal dan manipulasi dokumen HTML, sambil menyediakan beberapa kesan dan fungsi interaktif yang biasa digunakan untuk memproses data. Dalam pembangunan web, selalunya perlu menggunakan jQuery untuk menukar saiz imej. Beberapa kaedah yang biasa digunakan akan diperkenalkan di bawah.

1. Gunakan gaya CSS untuk menukar saiz imej

Tambah teg img dalam fail HTML dan tambahkan atribut kelas padanya:

<img src="image.jpg" class="image">

Kemudian dalam fail CSS , gunakan atribut lebar dan ketinggian untuk menukar saiz imej:

.image {
  width: 50%;
  height: auto;
}

Dengan cara ini, lebar imej akan ditetapkan kepada 50% daripada lebar elemen induknya dan ketinggian akan dilaraskan secara automatik mengikut kepada perkadaran. Jika anda ingin menetapkan lebar dan ketinggian tetap, anda boleh menetapkan atribut ketinggian kepada nilai tertentu:

.image {
  width: 200px;
  height: 100px;
}

2. Gunakan kaedah CSS jQuery untuk menukar saiz imej

kaedah CSS jQuery boleh digunakan pada elemen DOM Tetapkan sifat CSS.

Mula-mula, tambahkan teg img dalam fail HTML dan tambahkan atribut id padanya:

<img src="image.jpg" id="my-image">

Kemudian gunakan kaedah CSS jQuery untuk menukar saiz imej:

$(document).ready(function() {
  $("#my-image").css("width", "50%");
});

Ini cara, Lebar imej akan ditetapkan kepada 50% daripada lebar elemen induknya. Jika anda ingin menukar lebar dan ketinggian pada masa yang sama, anda boleh menggunakan objek literal:

$(document).ready(function() {
  $("#my-image").css({
    "width": "200px",
    "height": "100px"
  });
});

3. Gunakan kaedah attr jQuery untuk menukar saiz imej

Saiz imej boleh ditetapkan melalui atribut lebar dan ketinggian. Gunakan kaedah attr jQuery untuk menukar atribut tag img.

$(document).ready(function() {
  $("#my-image").attr({
    "width": "50%",
    "height": "auto"
  });
});

Dengan cara ini, lebar imej akan ditetapkan kepada 50% daripada lebar elemen induknya dan ketinggian akan melaraskan secara automatik mengikut perkadaran.

4. Cipta elemen img baharu

Menggunakan jQuery, anda boleh mencipta dan memasukkan elemen img baharu, dan kemudian menukar saiz imej dengan menetapkan sifatnya.

Pertama sekali, buat elemen kontena dalam fail HTML:

<div id="image-container"></div>

Kemudian gunakan jQuery untuk mencipta elemen img baharu dan masukkannya ke dalam elemen bekas:

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  $("#image-container").append(img);
});

Akhir sekali, Gunakan kaedah CSS atau attr untuk menukar saiz imej:

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  img.css({
    "width": "200px",
    "height": "100px"
  });
  $("#image-container").append(img);
});

Ringkasan:

Melalui CSS, kaedah CSS jQuery, kaedah attr dan kaedah mencipta elemen img baharu, kita boleh menukar imej dalam saiz halaman web. Memilih kaedah yang berbeza mengikut keperluan khusus dan menerapkannya secara fleksibel boleh membantu kami mencapai kesan halaman web dengan lebih baik.

Atas ialah kandungan terperinci jquery menukar saiz imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!