JavaScript的圖像調整大小不工作在IE瀏覽器？

下面給出的代碼將圖片大小調整爲160x160，並且適用於Firefox & Chrome，但不適用於Internet Explorer。爲什麼？JavaScript的圖像調整大小不工作在IE瀏覽器？

$(document).ready(function() { 
    $('#imagePreview img').each(function() { 
     $('#imagePreview img').each(function() { 
      var maxWidth = 160;    // Max width for the image 
      var maxHeight = 160;   // Max height for the image 
      var ratio = 0;     // Used for aspect ratio 
      var width = $(this).width(); // Current image width 
      var height = $(this).height(); // Current image height 

      // Check if the current width is larger than the max 
      if(width > maxWidth){ 
       ratio = maxWidth/width; 
       $(this).css("width", maxWidth);   // Set new width 
       $(this).css("height", height * ratio); // Scale height based on ratio 
       height = height * ratio;    // Reset height to match scaled image 
       width = width * ratio;     // Reset width to match scaled image 
      } 

      // Check if current height is larger than max 
      if(height > maxHeight){ 
       ratio = maxHeight/height; 
       $(this).css("height", maxHeight); // Set new height 
       $(this).css("width", width * ratio); // Scale width based on ratio 
       width = width * ratio; // Reset width to match scaled image 
      } 
     }); 
    }); 
});

來源

2013-02-26 K P

爲什麼兩個函數... – 2013-02-26 07:27:26

爲什麼你添加了行$（'＃imagePreview img'）。each（function（）{two times in code。 – 2013-02-26 07:28:12

總是提供HTML，CSS，JS相關問題和答案的演示：[JSBin]（http://jsbin.com/） – 2013-02-26 07:29:25

您並未等待圖像加載，因此它們不能保證具有大小（取決於它們是否被緩存）。

你應該

$(document).load(function() {

這是說更換

$(document).ready(function() {

，它看起來像你可以用這種風格整體更換：

#imagePreview img { 
    max-width: 160px; 
    max-height: 160px; 
}

（見demonstration）

來源

2013-02-26 07:27:46

JavaScript的圖像調整大小不工作在IE瀏覽器？

回答

相關問題