js图片按比例缩放,宽度和高度都不会超过指定值

亮术网 2020-06-29 本网原创

网页都有尺寸限制,显示到网页中的图片不能超过网页大小;如果图片超过网页大小,就得按比例把它缩小以确保它不变形。实现它,既可以用 Css,也可以用 javascript。如果网页要兼容旧浏览器(如 IE6),通常要用 javascript,因为 IE6 不支持 max-width 和 max-height,使用 expression() 又太耗资源;使用 javaScript 写个函数直接调用,既方便又高效。

 

js图片按比例缩放,宽度和高度都不会超过指定值方法:

w 最大宽度,h 最大高度
  function checkImage(obj,w,h)
  {
    var objCon = document.getElementById(obj);
    var ImgCell = objCon.getElementsByTagName("img");
    for(var i=0;i < ImgCell.length;i++)
    {
      var ImgWidth = ImgCell(i).width;
      var ImgHeight = ImgCell(i).height;
      if(ImgWidth > w)
      {
        var newHeight = w*ImgHeight/ImgWidth;
        if(newHeight <= h)
        {
          ImgCell(i).width = w;
          ImgCell(i).height = newHeight;
        }
        else
        {
          ImgCell(i).height = h;
          ImgCell(i).width = h*ImgWidth/ImgHeight;
        }
      }
      else
      {
        if(ImgHeight > h)
        {
          ImgCell(i).height = h;
          ImgCell(i).width = h*ImgWidth/ImgHeight;
        }
        else
        {
          ImgCell(i).width = ImgWidth;
          ImgCell(i).height = ImgHeight;
        }
      }
    }
  }

调用方法:

checkImage(parentNode,width,height)

parentNode 表示图片父对象 ID;

width 表示图片的宽度;

height 表示图片的高度。

 

最终效果如图所示: