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 {  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