使用js控制图片尺寸

需求:
用户上传图片后,前台显示,如果不对显示进行控制,图片会变形
<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定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值