動態等比例調整圖片大小的jQuery程式碼

admin發表於2017-03-06

有時候圖片的大小和尺寸是位置,如果上傳後,任由其自然伸展,很有可能導致網頁變形,所以要認為的控制圖片的尺寸,當然也不能夠太粗暴,直接定死圖片的尺寸,這樣可能會導致圖片變形,所以要進行等比例縮放,下面就是一段能夠實現此功能的程式碼。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
jQuery(window).load(function(){
  jQuery("div.product_info img").each(function(){
    DrawImage(this, 680, 1000);
  });
});
 
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;
      }
    }
  }
}

相關文章