0

私は検索と即興を行ってきましたが、これを思いつきました：

$(window).resize(function() {
    function imgResize()
    {
        if ($("#post_container img").width() > $("#post_container img").height()){
            $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
            }
        else if ($("#post_container img").width() < $("#post_container img").height()){
            $('#post_container img').css({ 'width': 'auto', 'height': '80%' });
            }
        else {
            $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
            }
    }
})

ウィンドウのサイズを変更するときに、画像が縦向きか横向きかを検出し、画面全体に収まるようにサイズを変更する必要があるため、そのコードは正しいですか。

4

2 に答える 2

0

どういうわけか意図したとおりに動作するようになりました。これまでの最終的なコードは次のとおりです。

$(window).load(function(){
    imgResize();
    $(window).on('resize', imgResize);
});


    function imgResize(){

        var sW = $("#right_column_post").width();  
        var sH = $(window).height();
        var iW = $("#post_container img").width();
        var iH = $("#post_container img").height();
        var eW = sW - iW; // horizontal space
        var eH = sH - iH; // vertical space

        if(eW > eH){ // more horizontal space
            $("#post_container img").css("height", (sH * 0.7));
            $("#post_container img").css("width", 'auto');

        } else if (eW < eH){ // more vertical space
            $("#post_container img").css("height", 'auto');
            $("#post_container img").css("width", (sW * 0.7));
        } else { // as much space
            $("#post_container img").css("height", 'auto');
            $("#post_container img").css("width", (sW * 0.7));
        } 


    }

ほとんど機能しますが、横長の比率の画像のウィンドウ幅を減らすと、画像の比率がしばらく歪んでいることがわかります。

http://tomiphotography.com/?p=158

また、ページをロードするときに画像が少しちらつきます。許すことはできますが、比率を修正する必要があります。

于 2013-04-22T18:00:19.030 に答える