jQueryでイメージのサイズを変更する

Question

クリックしたときにコンテナdivに収まるようにイメージのサイズを自動的に変更する小さなデモをセットアップしました。

これは、画像のサイズをボックスのサイズで割って、それに応じて幅や高さに基づいて画像のサイズを変更する前に、どの比率が高いかを調べることによって機能します。おそらくコードを見て、それがどのように動作するかを見てみるのが良いでしょう。

唯一の問題は、それがむしろうんざりしているということです。それは動作しますが、画像の幅に基づいてサイズを変更するのではなく、ブラウザの幅に基づいて計算されているように見えますが、依然としてサイズ変更の正しい値を渡しているようです。

下記の2つのリンクでご覧になり、ブラウザウィンドウのサイズを変更してグリッチを確認してください。私はoverflow:hidden;属性を超えているので、divの外にある画像の寸法を見ることができます。

ここにコードを見てみましょう： http://jsfiddle.net/sambeckhamdesign/NVAGG/11/

ビューここに全画面表示結果： http://jsfiddle.net/sambeckhamdesign/NVAGG/11/embedded/result/

または右私の頭の上から、ここで

$('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

をjQueryの読み込みを、私はこれが閉鎖問題であると確信しています。他の関数の中にある関数の中で 'this'を参照しているので、 'this'は画像にではなくウィンドウに添付されます。関数を更新して 'this'への参照を引数として渡すか、または 'this'を参照するclick関数にスコープされた変数を設定することができます。