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

转自:http://blog.csdn.net/rj042/article/details/4873576





做过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事件往往不起作用。除非加上防止缓存的代码!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页