跳到主要內容

範例 - JavaScript 等比例縮小圖片

max-width、max-height以及這兩個的 min 版本是偶爾能在某些CSS中看到的屬性設定
不過因為IE不會辨識這些屬性,所以就直接寫JavaScript 調整圖片大小

var img = this.getElementsByTagName("img")[0];

img.onload = function () {
    var maxWidth = "300",
        maxHeight = "80";

    if (img.offsetHeight >= (maxHeight / maxWidth) * img.offsetWidth) {
        img.style.width = img.offsetWidth / img.offsetHeight * maxHeight + "px";
        img.style.height = maxHeight + "px";
    } else {
        img.style.height = img.offsetHeight / img.offsetWidth * maxHeight + "px";
        img.style.width = maxWidth + "px";
    }
};

留言