Bagaimana untuk Mengubah Saiz Imej Secara Berkadar dengan jQuery: Mengekalkan Nisbah Aspek?

Mengubah Saiz Imej Secara Proporsional dengan jQuery: Memelihara Nisbah Aspek

Keupayaan mengubah saiz jQuery berguna apabila berurusan dengan imej yang besar. Untuk mengekalkan perkadaran imej semasa menskala, gunakan pendekatan berikut:

Logik:

Fungsi kalkulatorAspectRatioFit yang digunakan di sini mengira dimensi baharu untuk imej berdasarkan lebar maks yang dikehendaki dan ketinggian, dengan berkesan memelihara aspek asal nisbah.

Pelaksanaan:

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

Contoh Penggunaan:

<code class="js">// Calculate and apply new dimensions to the image
var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);
$(imageSelector).width(newDimensions.width).height(newDimensions.height);</code>

Dengan menggunakan kaedah ini, imej boleh diskalakan secara berkadar sambil mengekalkan bentuk dan perkadaran asalnya.

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