我们经常会遇到上传的图片大小与网页实际显示的大小不搭配,甚至连比例都不一样的情况。
这种情况的处理方法一般是:
1)直接定死IMG的宽度、高度
2)上传图片的时候自动生成适合显示的缩略图(裁剪、等比缩放、强制放大/缩小),等比缩放的时候有的时候还需要进行补白处理
3)样式只定义IMG标签的高度或只定义宽度,让图片自动等比放大/缩小
4)用javascript控制
这里就不去比较这几种方法的优缺点了
我要介绍的这个方法是用javascript进行控制的,缺点之一是需要为每个IMG标签设置onload事件
下面是代码:
changeImgSize()有两个参数,一个是IMG标签本身,一个是需要设置的最大宽度、高度
下面的示例是设置图片最大宽度为132px,最大高度为140px,并且图片有边框,边框距离图片要至少有2px(这里是用的div做边框,实际上可以直接给IMG设置border,不过如果要让图片垂直居中,那么最好是用div做边框并且div与img最大高度等高)
调用示例: