web-dev-qa-db-ja.com

divの高さを幅の半分に設定します

ユーザーの画面サイズに応じて幅が変化する場合、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

誰か助けてもらえますか？

jquerycssheightwidth
15
Flickdraw

最新のブラウザのみをサポートすることに問題がなければ、これを行うことができます： 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();
26
Dom Day

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

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

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

3
user2568107

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

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-sensitive-boxes

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

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

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

2
damien hawks

これは純粋なCSSでは不可能です。新しいサイズを生成するには、jQueryを使用する必要があります。私はこれをSOで見つけました： jQueryを使用してビューポートのサイズを取得する

0
Michael Walter