Rumah > Artikel > hujung hadapan web > 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!