Bagaimana untuk Mengubah Saiz Imej Secara Proporsional dengan jQuery?

Memelihara Perkadaran Imej dengan jQuery

Mengubah saiz imej secara berkadar adalah penting untuk mengekalkan integriti visualnya. jQuery menawarkan penyelesaian mudah untuk menskalakan imej sambil mengekalkan nisbah bidangnya.

Cara Mengira Dimensi Berkadar

Fungsi berikut menentukan lebar dan ketinggian yang sesuai untuk imej yang diubah saiz :

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

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

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

Fungsi ini menerima dimensi imej asal (srcWidth, srcHeight) dan lebar dan tinggi maksimum yang tersedia (maxWidth, maxHeight) sebagai parameter. Ia mengira nisbah minimum antara dimensi asal dan maksimum untuk mengekalkan nisbah bidang. Lebar dan ketinggian baharu kemudiannya ditentukan dengan mendarabkan nilai asal dengan nisbah ini.

Menggunakan Logik dengan jQuery

Setelah anda mengira dimensi baharu, anda boleh gunakan jQuery untuk mengubah saiz imej:

<code class="js">var newDimensions = calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight);

$("img").width(newDimensions.width);
$("img").height(newDimensions.height);</code>

Kod ini secara dinamik menetapkan atribut lebar dan ketinggian elemen imej yang dipilih kepada nilai yang dikira.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Imej Secara Proporsional dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!