网站中调用大尺寸图片时,常需要控制图片的最大长度或宽度。在文章后台管理不具备上传图片尺寸裁剪功能,或者是网站客户上传图片未控制尺寸时,需要在图片调用时长宽等比例缩小图片尺寸。下面是JavaScript函数,其中参数FitWidth和FitHeight分别为缩小至的最大长度和宽度:

function FitImage(ImgD,FitWidth,FitHeight){
  var image=new Image();
  image.src=ImgD.src;
  if(image.width>0 && image.height>0){
    if(image.width/image.height>=FitWidth/FitHeight){
      if(image.width>FitWidth){
        ImgD.width=FitWidth;
        ImgD.height=(image.height*FitWidth)/image.width;
      }else{
        ImgD.width=image.width;
        ImgD.height=image.height;
      }
    }else{
      if(image.height>FitHeight){
        ImgD.height=FitHeight;
        ImgD.width=(image.width*FitHeight)/image.height;
      }else{
        ImgD.width=image.width;
        ImgD.height=image.height;
      }
    }
  }
}

调用方法,在图片中添加onload触发事件,使函数FitImage在图像加载完成后立即执行,下例中缩小至的最大长度和宽度为150和80px:

<img src="big-size-picture.jpg" onload="FitImage(this,150,80);" />