Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengubah Saiz Imej Secara Berkadar dengan jQuery: Mengekalkan Nisbah Aspek?

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

Barbara Streisand
Barbara Streisandasal
2024-11-05 08:03:01763semak imbas

How to Resize Images Proportionally with jQuery: Maintaining Aspect Ratio?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn