Bagaimana untuk Mengekalkan Nisbah Aspek Imej Semasa Mengubah Saiz dengan jQuery?

Mengekang Nisbah Aspek Imej Semasa Mengubah Saiz dengan jQuery

Apabila bekerja dengan imej yang besar, kita selalunya perlu mengecilkan imej tersebut agar sesuai dengan dimensi tertentu. Mengekalkan nisbah aspek asal adalah penting untuk mengekalkan integriti imej.

Fungsi JQuery untuk Saiz Semula Berkadar:

Untuk mengekang perkadaran imej semasa mengubah saiz menggunakan jQuery, pertimbangkan fungsi berikut :

<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>

Penggunaan:

Untuk menggunakan fungsi ini, luluskan dimensi imej asal dan dimensi maksimum yang dikehendaki:

<code class="javascript">var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);</code>

Faedah:

Menggunakan fungsi ini memastikan imej diskalakan secara berkadar, mengekalkan nisbah bidangnya walaupun dikekang pada kawasan tertentu. Ia adalah alat yang berharga untuk mengekalkan integriti visual imej dalam pembangunan web.

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