转发：巧用img的width和height属性进行缩图，使图片不变形
2284 2019-02-28 10:00
巧用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事件往往不起作用。除非加上防止缓存的代码！
---------------------
作者：rj042
来源：CSDN
原文：https://blog.csdn.net/rj042/article/details/4873576
版权声明：本文为博主原创文章，转载请附上博文链接！
分类
热门文章
Tags
关于
提供Arduino芯片编程、Java网站设计、抢票系统、秒杀系统的支持以及创客服务
全部评论