js控制圖片等比例縮放程式碼

antzone發表於2017-03-17

圖片在應用中難免要根據實際情況進行大小調整,但是這種大小調整通常並不是無原則的,例如圖片等比例縮放就是要遵守的重要原則之一,否則就會出現圖片變形現象,下面就分享一段圖片等比例縮放的程式碼。

一.js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function DrawImage(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;   
      }   
    }   
  }   
}

二.圖片中的使用:

[JavaScript] 純文字檢視 複製程式碼
<img src="test.jpg" />

相關文章