0

ウィンドウのサイズが変更されたときに、いくつかの画像のサイズを自動的に変更しようとしています。

私はこれを以下のコードで動作させていますが、最小の高さを設定できるようにするなど、画像をもう少し制御したいのですが、何かアイデアはありますか？

また、画像をdivでラップして、もう少し制御できるようにすることもできますか？私はjsが苦手なので、ヘルプや説明が役立つでしょう

$(function() {
    var $img = $(".l");  
    var ratio;
    var offsetX = $img.offset().left;
    var offsetY = $img.offset().top;

    $(window).load(function () {
        ratio = $img.width() / $img.height();
        $(this).resize();
    });

    $(window).resize(function () {
        var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
        var availWidth = viewportWidth - offsetX - 70;
        var availHeight = viewportHeight - offsetY - 70;

        if (availWidth / availHeight > ratio) {
            $img.height(availHeight);
            $img.width(availHeight * ratio);
        } 
        else {
            $img.width(availWidth);
            $img.height(availWidth / ratio);
        }
    });
});
4

1 に答える 1

1

CSSを使用するだけです：

img { width: 100%; }

その後、必要に応じて申請することができheightますmin-height。

動作を確認するには、このフィドルのウィンドウのサイズを変更します。

フィドルの例

于 2012-05-02T12:08:31.997 に答える