JavaScript를 사용하여 이미지 크기를 조정하고 최대 너비와 높이를 제한하는 방법은 무엇입니까?

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