2

次のコードを使用して、画像に対してサイズ変更機能を実行しています。

$('.image_resize').each(function(){
    var ww = $(window).width() - 80 - 400;
    var wh = $(window).height() - 60;
    var iar = $(this).attr('height') / $(this).attr('width');
    var war = wh / ww;
    if(iar <= war){
        $(this).attr("width" , ww);
        $(this).attr("height" , ww * iar);
    }else{
        $(this).attr("height" , wh);
        $(this).attr("width" , wh / iar);
    }
})

このマークアップ:

<div id="home_image">
    <img class="image_resize" src="img/home_image.jpg" alt="home_image" width="945" height="557">
</div>

コードはうまく機能し、正しいアスペクト比で画像のサイズを変更しますが、問題はそのサイズ変更に最小の制限がないことです。そのため、画像は 20 ピクセル * の比率まで小さくなる可能性があり、それを制限したいと考えています。

画像を最小の高さ 400px に制限し、その上にコンテナーをトリミングするなど、どのように制限できますか?

4

2 に答える 2

3

ウィンドウの高さが 400 未満かどうかを確認するだけで、それを行うことができます。そうである場合は、次のコードを使用して強制的に 400 にします。

var wh = $(window).height() - 60;
wh = wh < 400 ? 400 : wh;
于 2013-02-24T19:39:24.570 に答える
1

ここで考慮すべきことが2つあります。

1）画像のサイズはwwとwhによって制限されます。画像の領域の最小幅と高さを指定することをお勧めします。

var ww = $(window).width() - 80 - 400;
var wh = $(window).height() - 60;
ww= ww<50 ? 50 : ww;
wh= wh<50 ? 50 : wh;

2）画像のサイズは、アスペクト比の影響も受けます。パノラマ画像があるとします。上記のコードでは、最小幅が50ピクセルであることを確認しますが、アスペクト比のため、高さは15ピクセルしかない場合があります。このような場合に最小の高さを適用する場合は、条件付きブロックを使用してコードを変更する必要があります。これにより、実際の幅もwwの制限よりもはるかに広くなることに注意してください。

if(iar <= war){
    if (ww*iar<50) { 
        $(this).attr("width" , 50 / iar);
        $(this).attr("height" , 50);
    } else {
        $(this).attr("width" , ww);
        $(this).attr("height" , ww * iar);
    }
}else{
    if (wh*iar<50) {
        $(this).attr("height" , 50 * iar);
        $(this).attr("width" , 50);
    } else {
        $(this).attr("height" , wh);
        $(this).attr("width" , wh / iar);
    }
}
于 2013-02-24T19:45:21.047 に答える