Bagaimana untuk Mengekalkan Perkadaran Imej Semasa Mengubah Saiz dalam jQuery?

Mengekalkan Perkadaran Imej Semasa Mengubah Saiz

Mengekalkan perkadaran imej semasa mengubah saiz memastikan nisbah aspek asal dikekalkan. Ini penting untuk mengelakkan herotan dan mengekalkan kesan visual imej yang dimaksudkan. Dalam jQuery, ini boleh dicapai menggunakan pelbagai teknik.

Satu teknik melibatkan penggunaan fungsi calculateAspectRatioFit, yang menerima dimensi imej asal dan lebar dan ketinggian maksimum yang dibenarkan. Fungsi ini mengira lebar dan tinggi baharu sambil mengekalkan nisbah bidang. Nilai yang dikira ini kemudiannya boleh digunakan untuk mengubah saiz imej dengan sewajarnya.

Kod untuk fungsi ini disediakan di bawah:

<code class="javascript">/**
 * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
 * images to fit into a certain area.
 *
 * @param {Number} srcWidth width of source image
 * @param {Number} srcHeight height of source image
 * @param {Number} maxWidth maximum available width
 * @param {Number} maxHeight maximum available height
 * @return {Object} { width, height }
 */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

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

Dengan menggunakan fungsi ini, pembangun boleh mengubah saiz imej sambil memastikan imej mereka perkadaran kekal utuh, memberikan pengalaman visual yang konsisten dan tidak diputarbelitkan merentas pelbagai saiz paparan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Perkadaran Imej Semasa Mengubah Saiz dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!