如何使用 JavaScript 實現圖片的縮放並限制最大寬高的功能？

如何使用 JavaScript 實作圖片的縮放並限制最大寬高的功能？

現今，網站上的圖片通常需要根據使用者的裝置和螢幕尺寸來進行適配，因此，為圖片添加縮放功能是十分必要的。透過 JavaScript，我們可以實現圖片的縮放，並且還可以限制其最大寬高，以確保網站的使用者體驗和視覺效果。

首先，我們需要一個包含圖片的 HTML 元素。在範例中，我們假設這個元素的 id 為 "image"，可以根據實際情況進行修改。

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

接下來，我們可以使用以下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`;
}

在上面的範例程式碼中，我們首先取得了圖片元素的引用，並設定了最大寬高（在範例中為500px）。然後，我們使用 resizeImage 函數來計算縮放比例，並根據比例計算縮放後的寬度和高度。接下來，我們檢查縮放後的寬度和高度是否超過最大寬高，並進行相應的調整。最後，我們將縮放後的寬度和高度套用到圖片元素上。

為了讓圖片在視窗大小改變時即時進行縮放，我們使用 resize 事件監聽器來觸發 resizeImage 函數。另外，在頁面載入完成後，我們也透過 DOMContentLoaded 事件來執行一次圖片縮放，以確保初始狀態下圖片的尺寸是正確的。

透過上述程式碼，我們可以實現圖片的縮放並限制最大寬高的功能。可依實際需求，調整最大寬高的數值和圖片元素的 id，以適應不同的網頁版面和圖片資源。

注意：範例程式碼中的圖片路徑需要根據實際情況進行修改，確保圖片可以正常載入。

以上是如何使用 JavaScript 實現圖片的縮放並限制最大寬高的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！