How to use JavaScript to scale images and limit the maximum width and height?

How to use JavaScript to scale images and limit the maximum width and height?

Nowadays, images on websites usually need to be adapted according to the user's device and screen size. Therefore, it is necessary to add zoom functions to images. Through JavaScript, we can scale the image and limit its maximum width and height to ensure the user experience and visual effect of the website.

First, we need an HTML element that contains an image. In the example, we assume that the id of this element is "image", which can be modified according to the actual situation.

<img  src="/static/imghwm/default1.png"  data-src="path/to/your/image.jpg"  class="lazy"  id="image" / alt="How to use JavaScript to scale images and limit the maximum width and height?" >

Next, we can use the following JavaScript code to implement image scaling and maximum width and height restrictions:

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

In the above example code, we first obtain the reference to the image element , and set the maximum width and height (500px in the example). Then, we use the resizeImage function to calculate the scaling ratio and calculate the scaled width and height based on the ratio. Next, we check whether the scaled width and height exceed the maximum width and height, and adjust accordingly. Finally, we apply the scaled width and height to the image element.

In order to allow the image to be scaled in real time when the window size changes, we use the resize event listener to trigger the resizeImage function. In addition, after the page is loaded, we also perform an image scaling through the DOMContentLoaded event to ensure that the size of the image is correct in the initial state.

Through the above code, we can realize the function of scaling the image and limiting the maximum width and height. You can adjust the maximum width and height and the ID of the image element according to actual needs to adapt to different web page layouts and image resources.

Note: The image path in the sample code needs to be modified according to the actual situation to ensure that the image can be loaded normally.

The above is the detailed content of How to use JavaScript to scale images and limit the maximum width and height?. For more information, please follow other related articles on the PHP Chinese website!