现在的位置: 首页 > 综合 > 正文

使用js控制图片尺寸

2013年11月22日 ⁄ 综合 ⁄ 共 918字 ⁄ 字号 评论关闭
需求:
       用户上传图片后,前台显示,如果不对显示进行控制,图片会变形
    <img id="img1" src="${vo.baby.picPath?if_exists}" border="0" img src="images/blackice.jpg" onload="if(this.width>200 && this.width<300) this.width=300; if(this.width>300) this.width=380;">

用户上传图片的尺寸通常无法控制,(当然你也可以在后台代码中对上传的图片进行处理,这样可以对图片的显示作精细的控制),如果你觉得麻烦的话 ,完全可以通过js作些控制,虽然粗糙但可行且简单。
 
注意对图片的显示最后不要将width和height定死,否则一些怪图片就容易变形,你可以根据需求控制其中某一个,并且再通过onload再作些处理,这样使得图片的显示和原来的图片不会有太大差距。

但使用后发现使用<img>的onload有些问题,在firefox下行为正常,但在IE下行为怪异,大多数情况并没有实现对图片尺寸的控制。不得已只有写body 的onload
onload="if(document.getElementById('img1').width>200 && document.getElementById('img1').width<300) document.getElementById('img1').width=300; if(document.getElementById('img1').width>300) document.getElementById('img1').width=380;"

这样写在IE和firefox下都正常了,不过总是觉得很怪,如果该页面很复杂,加载时间长的话,那么图片的尺寸会有比较长时间的渐变,虽然不理想,但一般情况可以满足

最简单的情况就是不写任何js,直接将img的height或width定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=754782

【上篇】
【下篇】

抱歉!评论已关闭.