JavaScript等比縮放：如何讓圖像適應不同頁面尺寸 在網頁設計中，一個重要的問題是如何讓圖像適應不同的頁面尺寸。一種常見的解決方案是使用等比縮放（Aspect Ratio Scaling），也稱為等比例縮放或比例縮放。這種技術可以讓圖像在保留其長寬比的同時縮放到適合給定容器的大小。在本文中，我們將介紹如何使用JavaScript實現等比縮放，并提供一些良好的代碼示例。 實現等比縮放的方法很多。其中一種方法是使用CSS，另一種是使用JavaScript。在本文中，我們將專注于JavaScript解決方案。所以，如果你正在尋找使用CSS等比縮放的方法，請參考其他的資源。 在開始之前，讓我們看看等比縮放的一些示例。假設我們有這樣一個圖像：

如果我們將這個圖像插入到一個容器中，并希望它在其容器內等比縮放，我們可以使用如下代碼：

function scaleImage(container, img) {
var containerWidth = container.clientWidth;
var imgWidth = img.width;
var scale = containerWidth / imgWidth;
img.style.width = Math.round(scale * imgWidth) + "px";
img.style.height = Math.round(scale * img.height) + "px";
}

這個函數接受兩個參數，一個是容器元素，一個是圖像元素。它首先獲取容器的寬度和圖像的原始寬度。然后，它計算縮放比例，并將圖像的寬度和高度設置為縮放后的值。是不是很簡單？ 對于那些喜歡使用jQuery的人來說，還有更簡單的方法：

function scaleImage(container, img) {
var containerWidth = $(container).width();
var imgWidth = $(img).width();
var scale = containerWidth / imgWidth;
$(img).css({'width': Math.round(scale * imgWidth), 'height': Math.round(scale * $(img).height())});
}

這個函數做的事情與前面那個函數是相同的，只是使用了jQuery方法來獲取元素的寬度和高度以及設置樣式。 你可以在任何時候調用這些函數來對圖像進行縮放。 一個很常見的需求是在頁面加載時自動縮放所有的圖像。這可以通過以下代碼實現：

window.addEventListener('load', function() {
var containers = document.querySelectorAll('.image-container');
for (var i = 0; i< containers.length; i++) {
var img = containers[i].querySelector('img');
scaleImage(containers[i], img);
}
});

這個代碼片段意味著在窗口加載后遍歷所有帶有'image-container'類的元素，為它們調用scaleImage函數。這將調整所有圖像的大小以適合它們的容器。 需要注意的是，我們使用了window.onload事件來確保代碼在所有圖像都加載完畢后才執行。如果你正在使用jQuery，請使用一個.ready()函數而不是window.onload事件。 另一個問題是如何使圖像在更改窗口大小時自動縮放。這需要使用resize事件，并且需要添加一個setTimeout函數，以限制resize事件的頻率：

window.addEventListener('resize', function() {
setTimeout(function() {
var containers = document.querySelectorAll('.image-container');
for (var i = 0; i< containers.length; i++) {
var img = containers[i].querySelector('img');
scaleImage(containers[i], img);
}
}, 100);
});

這個代碼片段意味著在窗口大小發生變化時，我們等待100毫秒后調整所有的圖像大小。 這就是JavaScript等比縮放的簡單實現，它使圖像適應不同的頁面尺寸。希望這篇文章能對你有所幫助。