对网络图片显示的尺寸缩放的处理

页面中获取了一个图片的URL,
然后赋值给img元素的src属性,
图片即可显示在页面中。

但是在页面中显示时,
如果需要对显示图片的尺寸做限制,
就需要一些额外的处理了,
同时也要考虑到图片加载甚至异步的问题。

我们可以在img的onload里写一个function:
<img src="" οnlοad="imgOnload(this)" />
然后对这个function做一些定义:
function imgOnload( el ){
var w = el.width, h = el.height; //在onload里可以直接拿到img的width和height
if( w > h ){ //对宽高做一下比较
el.height = 296; //重写img的height
}else{
el.width = 296; //重写img的width
}
}

这样一来,当图片是一个扁形的(w > h),
则把高设置为目标尺寸,
如果图片是一个长条形的(h > w),
则把宽设置为目标尺寸。

以上的变化,只设置宽高其中一个属性,
另外一个属性,是可以自动的等比缩放的。

一定要在onload里去做这件事。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值