在jQuery中調整圖像大小

Question

我已經設置了一個小型演示程序，它可以在點擊圖像時自動調整圖像的大小以適應它的容器div。

它通過獲取圖像的大小，然後將其除以框的大小，並根據寬度或高度相應地調整圖像大小之前，確定哪個比率較高。查看代碼以查看它的工作原理可能會更好。

唯一的問題是，它是相當不好的。它可以工作，但不是根據圖像寬度調整大小，而是根據瀏覽器寬度計算它，但仍然在調整大小時傳遞正確的值。

看看它在下面的兩個鏈接，並有一個在調整瀏覽器窗口看到毛刺的戲劇。我刪除了overflow:hidden;屬性，以便您可以看到div外部圖像的尺寸。

看看這裏的代碼： http://jsfiddle.net/sambeckhamdesign/NVAGG/11/

查看全屏結果在這裏： http://jsfiddle.net/sambeckhamdesign/NVAGG/11/embedded/result/

或讀到這裏了jQuery

$('img').click(function() { 
function wr(){ 
    var imageWidth = 
    $(this).width()/250; 
    return imageWidth; 
} 
function hr(){ 
    var imageHeight = 
    $(this).height()/200; 
    return imageHeight; 
} 

function nh(){ 
    var newHeight = 
    $(this).height()/hr(); 
    return newHeight; 
} 

function nw(){ 
    var newWidth = 
    $(this).width()/wr(); 
    return newWidth; 
} 

if (wr() > hr()){ 
    $(this).css('width', nw() + 'px'); 
}else{ 
    $(this).css('height', nh() + 'px'); 
} 
}); 

Answer 1

恰好是我的頭頂，我敢打賭，這是一個關閉問題。由於您在函數中引用了'this'，這些函數也在另一個函數內部，因此'this'不會附加到圖像上，而是附加到窗口上。您可以更新函數以將「this」的引用作爲參數進行傳遞，也可以將變量的作用範圍設置爲引用「this」的click函數。