0

クリックするとコンテナdiv内に収まるように画像のサイズを自動的に変更する小さなデモを設定しました。

これは、画像のサイズを取得し、それをボックスのサイズで割って、幅または高さに応じて画像のサイズを変更する前に、どちらの比率が高いかを判断することで機能します。コードを見て、どのように機能するかを確認することをお勧めします。

唯一の問題は、それがかなりグリッチであるということです。それは機能しますが、画像の幅に基づいてサイズを変更する代わりに、ブラウザの幅に基づいてサイズを計算しているように見えますが、サイズ変更時に正しい値を渡します。

以下の2つのリンクを見て、ブラウザウィンドウのサイズを変更してグリッチを確認してください。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');
}
});
4

1 に答える 1

1

頭のてっぺんから、これは閉鎖の問題だと思います。別の関数の内部にもある関数の内部で「this」を参照しているため、「this」は画像ではなくウィンドウに添付されます。関数を更新して、引数として「this」への参照を渡すか、「this」を参照するクリック関数にスコープされた変数を設定できます。

于 2011-02-04T15:45:06.980 に答える