基於百分比值調整圖像大小

我正在調整窗口大小時調整一個div內某些圖像的代碼。我認爲如果你閱讀代碼，你會明白：基於百分比值調整圖像大小

$('img').each(function() { 
    var image = $(this); 
    var imagewidth = $(this).width(); 
    $.event.add(window, 'load', resizeFrame); 
    $.event.add(window, 'resize', resizeFrame); 

    function resizeFrame() { 

     var windowWidth = $(window).width(); 
     var ratio = (980/windowWidth)*100; 

     if (windowWidth <= 980) { 
      image.width(ratio*imagewidth + '%'); 
     } 
    } 
});

該代碼不起作用，日誌顯示一些對象..和沒有價值。

該代碼以某種方式工作。問題是它根據窗口的寬度調整圖像的大小，而不是其原始大小的百分比。

來源

2013-01-22 thednp

你打電話之前是否等待圖像加載？ –

你有錯別字：windowWindth/windowWidth –

我建議你使用媒體查詢。 – dfsq

此代碼有多個問題。您首先爲調整大小事件附加了N調整大小處理程序！你不使用每個功能正常

這裏是cleandup代碼：

$(window).resize(function(evt) { 
     var windowWidth = $(window).width(); 
     var ratio = (windowWidth/980) * 100; 
     $('img').each(function(i, obj) { 
      var imagewidth = $(obj).width(); 
      if (windowWidth <= 980) { 
       $(obj).attr('width', ratio + '%'); 
      } else { 
       $(obj).attr('width', '100%'); 
      } 
     }); 
    });

HTML：

<div style="width: 200px;"> 
       <img src="image.png"> 
      </div>

此功能工作，你需要確定的最大寬度在圖像周圍的div中的圖像。否則你必須保存圖像的原始寬度來重新縮放它

來源

2013-01-22 19:58:56 mercsen

我不明白你用什麼（我，obj）？你能解釋一下嗎？ – thednp

當然我可以;）每個函數需要一個回調函數，並將每次迭代傳遞給該函數的參數。我=沒有。迭代，obj =當前對象。我認爲你不必乘以圖像寬度當你想使用百分比witdh – mercsen

這段代碼不起作用 – thednp

基於百分比值調整圖像大小

回答

相關問題