当前位置: 代码迷 >> Web前端 >> 对网络图片展示的尺寸缩放的处理
  详细解决方案

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

热度:128   发布时间:2013-10-24 18:27:24.0
对网络图片显示的尺寸缩放的处理
页面中获取了一个图片的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里去做这件事。
  相关解决方案