Comment utiliser JavaScript pour redimensionner les images et limiter la largeur et la hauteur maximales ?

Comment utiliser JavaScript pour redimensionner les images et limiter la largeur et la hauteur maximales ?

De nos jours, les images sur les sites Web doivent généralement être adaptées en fonction de l'appareil de l'utilisateur et de la taille de l'écran. Il est donc nécessaire d'ajouter une fonction de zoom aux images. Grâce à JavaScript, nous pouvons redimensionner l'image et limiter sa largeur et sa hauteur maximales pour garantir l'expérience utilisateur et l'effet visuel du site Web.

Tout d’abord, nous avons besoin d’un élément HTML contenant une image. Dans l'exemple, nous supposons que l'identifiant de cet élément est "image", qui peut être modifié en fonction de la situation réelle.

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

Ensuite, nous pouvons utiliser le code JavaScript suivant pour implémenter la mise à l'échelle de l'image et les restrictions maximales de largeur et de hauteur :

// 获取图片元素
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`;
}

Dans l'exemple de code ci-dessus, nous obtenons d'abord la référence à l'élément d'image et définissons la largeur et la hauteur maximales ( 500px dans l'exemple). Nous utilisons ensuite la fonction resizeImage pour calculer le rapport de mise à l'échelle et calculer la largeur et la hauteur mises à l'échelle en fonction du rapport. Ensuite, nous vérifions si la largeur et la hauteur mises à l’échelle dépassent la largeur et la hauteur maximales et ajustons en conséquence. Enfin, nous appliquons la largeur et la hauteur mises à l'échelle à l'élément d'image. resizeImage 函数来计算缩放比例，并根据比例计算出缩放后的宽度和高度。接下来，我们检查缩放后的宽度和高度是否超过最大宽高，并进行相应的调整。最后，我们将缩放后的宽度和高度应用到图片元素上。

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

Afin de permettre à l'image de s'adapter en temps réel lorsque la taille de la fenêtre change, nous utilisons l'écouteur d'événement resize pour déclencher la fonction resizeImage. De plus, une fois la page chargée, nous effectuons également une mise à l'échelle de l'image via l'événement DOMContentLoaded pour garantir que la taille de l'image est correcte dans l'état initial.

Avec le code ci-dessus, nous pouvons réaliser la fonction de mise à l'échelle de l'image et de limitation de la largeur et de la hauteur maximales. Vous pouvez ajuster la largeur et la hauteur maximales ainsi que l'ID de l'élément d'image en fonction des besoins réels pour vous adapter aux différentes mises en page de pages Web et ressources d'image.

Remarque : le chemin de l'image dans l'exemple de code doit être modifié en fonction de la situation réelle pour garantir que l'image peut être chargée normalement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!