关于图片宽高的等比缩放，其实需求就是让图片自适应父容器的宽高，并且是等比缩放图片，使图片不变形。
例如，需要实现如下的效果：
要实现上面的效果，需要知道图片的宽高，父容器的宽高，然后计算缩放后的宽高。
首先，图片的宽高和父容器的宽高都能方便的获取到，然后，等比缩放的算法如下：
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