巧用img的width和height属性进行缩图，使图片不变形

 做过web开发的哥们都会遇到要显示图片的情况。有时候在页面上因为布局的限制，所以需要限制图片显示的尺寸（即缩图显示）。

 

有如下几种情况：

1：要求图片以某个宽度显示，比如150. 则可以这样指定<img src="图片路径" width="150">

这样可以保证图片显示的宽度为150，而高度也会以等比例显示，最终显示的图片也不会变形。

 

2：同理要求以某个高度显示，比如150，这同样可以这样指定<img src="图片路径" heigh="150">

这样可以保证图片显示的高度为150，而宽度也会以等比例显示，最终显示的图片也不会变形。

 

3：要求图片以某个宽度和高度显示，比如150*150.

如果是动态页面，则很好办，可以事先在动态代码中算出缩图后的宽度和高度的，然后指定这个最接近的属性，就行了。

比如原始图片是1024*800的，则缩图因子=7（取1024/150和800/150的值中大的）。根据缩图因子得到原图缩图后是147*115.而缩图后的宽度是147，更接近要求的宽度150（缩图后的高度是115，相对要求的高度150差距较大）。所以可以这样指定<img src="图片路径" width="150">， 这样图片也不会变形，也保证了高度不会超过150。

 

 

当然，有人会说通过在img标签的onload事件处理缩图。这样也可以，但对于不同的浏览器，会得到不同的结果。在ie中，由于存在缓存，所以通过onload事件往往不起作用。除非加上防止缓存的代码！