使用js控制图片尺寸

xiaoxiao2021-03-01  23

需求: 用户上传图片后,前台显示,如果不对显示进行控制,图片会变形 <img id="img1" src="${vo.baby.picPath?if_exists}" border="0" img src="images/blackice.jpg" οnlοad="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 οnlοad="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定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹 相关资源:vlightbox 图片浏览 及 上传图片尺寸大小控制 源码
转载请注明原文地址: https://www.6miu.com/read-3450170.html

最新回复(0)