0

問題: プラグイン内の画像を、ウィンドウのサイズ変更で短くなる div 内で動的に (H&W、比例して) サイズ変更するには (基本的に 3 つの領域があります: トップ - 静的、ボトム - 静的、ミドル - 動的)width:100%とtop:#px bottom:#px. また、画像は最終的に設定された高さ (603x427) のみをサイズ変更する必要があります

ここにページがあります：

私の現在の悩み

私はかなり近いですが、以下のコードで何が起こりますか:

<script type="text/javascript">
            $(window).resize(function() {
                var hgt = $(window).height() - 427;
                var wid = $(window).width() - 633;
                $('.slides_container img').height(hgt);
                $('.slides_container img').width(wid);
                $('.slides_container').height(hgt-30);
                $('.slides_container').height(hgt);
                $('.vid').width($(window).width());
            });
</script>

幅と同様に画像の高さが変化しますが、それらは比例して変化しません。代わりに、幅が正しく変更され、高さが正しく変更されますが、互いに独立しています。画像の比率を維持したい。

凡例:.slides_containerはプラグインの一部で、画像が含まれています。.slides_container imgは画像であり、センタリング用.vidの が含まれています。.container上記のコードで$('.slides_container').height(hgt-30);は、ページネーションを許可します。

4

2 に答える 2

1

代わりに css() 関数を使用してください。

$(window).resize(function() {
    var hgt = $(window).height() - 427;
    var wid = $(window).width() - 633;
    $('.slides_container img').css({
        width:wid,
        height:hgt
    });
    $('.slides_container').height(hgt);
    $('.vid').width($(this).width());
});
于 2012-04-08T22:38:54.947 に答える
0

img 要素なしで妥協できる場合は、それを背景にすることができます。これがあなたが探しているものだと思いますhttp://css-tricks.com/how-to-resizeable-background-image/

それ以外の場合は、元の比率 (ration = orgWidth/orgHeight) があれば、それを幅/高さに反映させることができます。サイズ変更時、height = org_height * ratio. 以前に達成された、それはかなり簡単です: 画像を比例的にサイズ変更する方法/アスペクト比を維持する方法は?

于 2012-04-08T23:32:37.970 に答える