页面中图片如何等比显示
页面中很多时候都需要图片显示其原样,但是有时候图片实际大小与页面中显示区域的大小又有差距,这个怎么办?只有图片等比显示(只是等比缩小,不会等比放大,因为放大会失真,我想哪个产品经理都不想要这样的结果)
虽然之前项目中多次用到,但是没有保存起来,这里就显摆显摆,以后直接复制就可以哦。
<script type="text/javascript"> function imgsizeauto(obj, width, height) { var img = new Image(); img.src = obj.src; var realwidth = img.width; var realheight = img.height; var w_diff = realwidth - width; var h_diff = realheight - height; if(w_diff > 0 || h_diff > 0) { if(w_diff > h_diff) { obj.style.width = width + "px"; obj.style.height = "auto"; } else { obj.style.height = height + "px"; obj.style.width = "auto"; } } else { obj.style.width = "auto"; obj.style.height = "auto"; } } </script>在HTML中像如下这样调用
<img src="C:/Pictures/51syj3j.jpg" width="100" height="200" onload="imgsizeauto(this, 100, 200)" /> <img src="C:/Pictures/Desert.jpg" onload="imgsizeauto(this, 200, 100)" />
需要注意的是:
1. 一定要把这两个示例代码在页面中载入的次序调整对,如果按照上面的写法,那就必须先载入Js 代码,然后才可以写这个<img>,否则会提示脚本错误哦。
2. 为了完全控制图片不乱跑,可以在样式里初始化的时候控制这个<img> 的宽高,或者是标签里加上 width ,height 属性值,虽然在加载的时候图片可能是模糊的,但是那个时间不会超过0.5秒,所以不必多虑。
3. 上面函数的第一个参数值:当前img对象;第二个参数:控制图片显示的最大宽度(不想让它超过这个宽度);第三个参数:控制图片显示的最大高度(不想让它超过这个高度)。