JS實現圖片寬高的等比縮放

關於圖片寬高的等比縮放，其實需求就是讓圖片自適應父容器的寬高，並且是等比縮放圖片，使圖片不變形。

例如，需要實現如下的效果：

要實現上面的效果，需要知道圖片的寬高，父容器的寬高，然后計算縮放后的寬高。

首先，圖片的寬高和父容器的寬高都能方便的獲取到，然后，等比縮放的算法如下：

function scalingImage(imgWidth, imgHeight, containerWidth, containerHeight) {
    var containerRatio = containerWidth / containerHeight;
    var imgRatio = imgWidth / imgHeight;

    if (imgRatio > containerRatio) {
        imgWidth = containerWidth;
        imgHeight = containerWidth / imgRatio;
    } else if (imgRatio < containerRatio) {
        imgHeight = containerHeight;
        imgWidth = containerHeight * imgRatio;
    } else {
        imgWidth = containerWidth;
        imgHeight = containerHeight;
    }

    return { width: imgWidth, height: imgHeight };
}

接着，如何讓圖片居中顯示呢？

方法一：可以設置img標簽的margin-left和margin-top屬性實現，這個可用通過父容器的寬高和圖片縮放后的寬高計算出來。如下：

    var marginLeft = (containerWidth - width) / 2;
    var marginTop = (containerHeight - height) / 2;

方法二：通過設置父容器的height和line-height屬性值相同，以及img標簽屬性 vertical-align: middle; ，讓img標簽垂直居中；設置父容器屬性 text-align: center; ，讓img標簽水平居中。

如何讓圖片加載完成就自適應寬高呢？

這個可以綁定img標簽的onload事件，代碼如下：

    <div class="img-container">
        <img src="images/1.png" onload="scalingImg(this)" width="" height="">
    </div>

function scalingImg(obj){
    var $this = $(obj);

    var imgWidth=$this.width();
    var imgHeight=$this.height();

    var parent = $this.parent();
    var containerWidth = parent.width();
    var containerHeight=parent.height();

    var containerRatio = containerWidth / containerHeight;
    var imgRatio = imgWidth / imgHeight;

    if (imgRatio > containerRatio) {
        imgWidth = containerWidth;
        imgHeight = containerWidth / imgRatio;
    } else if (imgRatio < containerRatio) {
        imgHeight = containerHeight;
        imgWidth = containerHeight * imgRatio;
    } else {
        imgWidth = containerWidth;
        imgHeight = containerHeight;
    }

    $this.attr('width',imgWidth);
    $this.attr('height',imgHeight);
}

最后，附上demo源碼如下：ScaleImageDemo.zip