页面中获取了一个图片的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里去做这件事。
然后赋值给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里去做这件事。