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) / ;
    var marginTop = (containerHeight - height) / ;

方法二：通过设置父容器的height和line-height属性值相同，以及img标签属性 vertical-align: middle; ，让img标签垂直居中；设置父容器属性 text-align: center; ，让img标签水平居中。

如何让图片加载完成就自适应宽高呢？

这个可以绑定img标签的onload事件，代码如下：

    <div class="img-container">
        <img src="data: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