16

ユーザーの画面サイズに応じて幅が変わる場合、divの高さを幅のちょうど半分に設定するにはどうすればよいですか?

私はdivに次のセットを持っています...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

幅はこれで問題なく機能します。画面が狭すぎると 400 ピクセルでロックされ、画面が大きくなりすぎると 1200 ピクセルで拡大が停止します。しかし、私はまた、高さをいつでも幅のちょうど半分になるように変更したいと考えています。何かのようなもの...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

それはうまくいきませんでした（私は本当に期待していませんでした）。

可能であればCSSを使用したいと思いますが、ユーザーがインターネットウィンドウのサイズも手動で調整した場合に高さを変更したいので(現在の幅で何が起こるかなど)。CSSでそれが可能かどうかはわかりませんが、Jqueryでこれを実現する方法があれば、それも喜んで使用します.

上記のjsFiddleを参考に。

誰でも私を助けることができますか？

4

3 に答える 3

30

最新のブラウザーのみをサポートしても問題ない場合は、これを行うことができます: http://jsfiddle.net/kNPfh/

vw 測定値はビューポート幅の 1/100 であるため、50vw は画面幅の 50% です。

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

そうでない場合は、http: //jsfiddle.net/ff7WC/を使用できます。

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();
于 2013-07-16T08:59:30.567 に答える
3

jsファイルがあることを確認してから、これを使用してください

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/

于 2013-07-16T09:07:29.327 に答える
2

相対的なパディング (高さ方向であっても) は要素の幅に基づいているため、親アイテムのパディングを使用してそれを行うことができます。

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

詳細については、件名に関するこの記事を参照して ください http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

次のような jquery を使用することもできます。

$('.ss').css('height',width()/2);

左のチェックマークをクリックして疑問が解決した場合は、これを正解として選択してください。

于 2013-07-16T08:53:52.553 に答える