讓頁面上圖檔不變形

很多清單圖檔的原圖超過指定大小，然而圖檔本身高寬比例不是固定的，是以在設定此類情況時最好的處理方式是使用js來固定圖檔大小并保證圖檔居中，且讓圖檔不變形。

js代碼：

1:  /******************************************************************/      

2:  /******将圖檔居中，在圖檔外面嵌套一個div不設定任何樣式*************/      

3:  /******參數：圖檔最大寬度，圖檔最大高度,******/      

4:  /******調用方法：$('.class').centerImage({MaxWidth:190,MaxHeight:135})*************/      

5:  /******************************************************************/      

6:  (function ($) {      

7:      $.fn.centerImage = function (options) {      

8:          var opts = $.extend({}, {      

9:              MaxWidth: 190, MaxHeight: 135      

10:          }, options);      

11:          var img = new Image(); //建立一個Image對象，實作圖檔的預下載下傳      

12:          img.src = $(this).attr('src');      

13:          var oldImg = $(this);      

14:          if (img.complete) { // 如果圖檔已經存在于浏覽器緩存，直接調用回調函數      

15:              SetImageCenter(img, oldImg, opts);      

16:              return; // 直接傳回，不用再處理onload事件      

17:          } else {      

18:              img.onload = function () { //圖檔下載下傳完畢時異步調用callback函數。      

19:                  SetImageCenter(img, oldImg, opts); //将回調函數的this替換為Image對象      

20:              };      

21:          }      

22:      }      

23:      function SetImageCenter(img, imgold, opts) {      

24:          var iwidth = opts.MaxWidth;      

25:          var iheight = opts.MaxHeight;      

26:          //設定圖檔的高寬      

27:          if (img.width > 0 && img.height > 0) {      

28:              if (img.width / img.height >= iwidth / iheight) {      

29:                  if (img.width > iwidth) {      

30:                      imgold.css({ width: iwidth, height: (img.height * iwidth) / img.width });      

31:                  } else {      

32:                      imgold.css({ width: img.width, height: img.height });      

33:                  }      

34:              } else {      

35:                  if (img.height > iheight) {      

36:                      imgold.css({ width: (img.width * iheight) / img.height, height: iheight });      

37:                  } else {      

38:                      imgold.css({ width: img.width, height: img.height });      

39:                  }      

40:              }      

41:          }      

42:          //設定圖檔外層div的margin-top和margin-left      

43:          var div = imgold.parent(); //擷取包含本圖檔的div      

44:          if (imgold.height() < iheight) {      

45:              var top = (iheight - imgold.height()) / 2;      

46:              div.css('margin-top', top + 'px');      

47:          }      

48:          if (imgold.width() < iwidth) {      

49:              var left = (iwidth - imgold.width()) / 2;      

50:              div.css('margin-left', left + 'px');      

51:          }      

52:      }      

53:  })(jQuery);      

54:         

需要使用jq1.7.2以上。

調用方式：

1:   $("img[flag=img]").each(function (){      

2:                  $(this).centerImage({ MaxWidth: 190, MaxHeight: 135 });      

3:              });      

如果使用：$("img[flag=img]").centerImage({ MaxWidth: 190, MaxHeight: 135 });會導緻頁面上的圖檔變形，但圖檔整體大小會以使用者設定的大小為準。

轉載于:https://www.cnblogs.com/maomao999/p/3708506.html