Bagaimana Mengubah Saiz Imej Secara Berkadar Sambil Mengekalkan Nisbah Aspek?

Cara Mengubah Saiz Imej Secara Berkadaran

Mengubah saiz imej secara berkadar ialah tugas biasa yang boleh digunakan untuk memasukkan imej ke dalam dimensi tertentu sambil mengekalkan aspeknya nisbah. Ini amat berguna apabila bekerja dengan imej bersaiz berbeza yang perlu dipaparkan secara konsisten.

Untuk mengubah saiz imej secara berkadar menggunakan jQuery, anda boleh menggunakan kod berikut:

<code class="javascript">$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});</code>

Kod ini menetapkan lebar dan ketinggian maksimum imej kepada 100%, yang membolehkan imej berskala secara berkadar untuk dimuatkan dalam dimensi ini. Sifat 'lebar' dan 'tinggi' ditetapkan kepada 'auto' untuk mengekalkan nisbah bidang asal.

Kaedah lain untuk mengira dimensi yang sesuai untuk imej sambil mengekalkan nisbah bidangnya ialah menggunakan calculateAspectRatioFit() fungsi:

<code class="javascript">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}</code>

Fungsi ini mengambil lebar dan ketinggian asal imej, bersama-sama dengan lebar dan ketinggian maksimum yang tersedia, serta mengira lebar dan tinggi baharu yang mengekalkan nisbah bidang dalam had yang ditentukan.

Atas ialah kandungan terperinci Bagaimana Mengubah Saiz Imej Secara Berkadar Sambil Mengekalkan Nisbah Aspek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!