Bagaimana untuk menggunakan JavaScript untuk menskalakan imej dan mengehadkan lebar dan ketinggian maksimum?

Bagaimana untuk menggunakan JavaScript untuk menskala imej dan mengehadkan lebar dan ketinggian maksimum?

Pada masa kini, imej di laman web biasanya perlu disesuaikan mengikut peranti pengguna dan saiz skrin. Melalui JavaScript, kami boleh menskalakan imej dan mengehadkan lebar dan ketinggian maksimumnya untuk memastikan pengalaman pengguna dan kesan visual tapak web.

Pertama, kita memerlukan elemen HTML yang mengandungi imej. Dalam contoh, kami menganggap bahawa id elemen ini ialah "imej", yang boleh diubah suai mengikut situasi sebenar.

<img id="image" src="path/to/your/image.jpg" />

Seterusnya, kami boleh menggunakan kod JavaScript berikut untuk melaksanakan penskalaan imej dan sekatan lebar dan ketinggian maksimum:

// 获取图片元素
const image = document.getElementById("image");

// 设置最大宽高
const maxWidth = 500;
const maxHeight = 500;

// 监听窗口大小改变事件
window.addEventListener("resize", resizeImage);

// 页面加载完成后执行一次图片缩放
window.addEventListener("DOMContentLoaded", resizeImage);

// 图片缩放函数
function resizeImage() {
  // 获取视口宽度和高度
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // 计算缩放比例
  const widthRatio = viewportWidth / image.naturalWidth;
  const heightRatio = viewportHeight / image.naturalHeight;
  const scale = Math.min(widthRatio, heightRatio);

  // 计算缩放后的宽度和高度
  let newWidth = image.naturalWidth * scale;
  let newHeight = image.naturalHeight * scale;

  // 检查是否超过最大宽度和最大高度
  if (newWidth > maxWidth) {
    const ratio = maxWidth / newWidth;
    newWidth *= ratio;
    newHeight *= ratio;
  }

  if (newHeight > maxHeight) {
    const ratio = maxHeight / newHeight;
    newWidth *= ratio;
    newHeight *= ratio;
  }

  // 应用缩放后的宽度和高度
  image.style.width = `${newWidth}px`;
  image.style.height = `${newHeight}px`;
}

Dalam kod sampel di atas, kami mula-mula mendapatkan rujukan kepada elemen imej, dengan set lebar dan ketinggian maksimum (500px dalam contoh). Kami kemudian menggunakan fungsi resizeImage untuk mengira nisbah penskalaan dan mengira lebar dan tinggi berskala berdasarkan nisbah. Seterusnya, kami menyemak sama ada lebar dan tinggi berskala melebihi lebar dan ketinggian maksimum, dan laraskan dengan sewajarnya. Akhir sekali, kami menggunakan lebar dan ketinggian berskala pada elemen imej. resizeImage 函数来计算缩放比例，并根据比例计算出缩放后的宽度和高度。接下来，我们检查缩放后的宽度和高度是否超过最大宽高，并进行相应的调整。最后，我们将缩放后的宽度和高度应用到图片元素上。

为了让图片在窗口大小改变时实时进行缩放，我们使用 resize 事件监听器来触发 resizeImage 函数。另外，在页面加载完成后，我们还通过 DOMContentLoaded

Untuk membolehkan imej berskala dalam masa nyata apabila saiz tetingkap berubah, kami menggunakan pendengar acara resize untuk mencetuskan fungsi resizeImage . Selain itu, selepas halaman dimuatkan, kami juga melakukan penskalaan imej melalui acara DOMContentLoaded untuk memastikan saiz imej adalah betul dalam keadaan awal.

Dengan kod di atas, kita boleh merealisasikan fungsi penskalaan imej dan mengehadkan lebar dan ketinggian maksimum. Anda boleh melaraskan lebar dan ketinggian maksimum serta ID elemen imej mengikut keperluan sebenar untuk menyesuaikan diri dengan reka letak halaman web dan sumber imej yang berbeza.

Nota: Laluan imej dalam kod sampel perlu diubah suai mengikut situasi sebenar untuk memastikan imej boleh dimuatkan secara normal. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk menskalakan imej dan mengehadkan lebar dan ketinggian maksimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!