首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-10-24 
对网络图片显示的尺寸缩放的处理页面中获取了一个图片的URL,然后赋值给img元素的src属性,图片即可显示在页

对网络图片显示的尺寸缩放的处理
页面中获取了一个图片的URL,
然后赋值给img元素的src属性,
图片即可显示在页面中。

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

我们可以在img的onload里写一个function:
<img src="" onload="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里去做这件事。

热点排行