2

ここの jsfiddle にはhttp://jsfiddle.net/H3VW5/幅がパーセンテージに基づいている3つのdivがあります。高さを特定の縦横比に一致させて、ウィンドウが縮小したときに高さが幅に合わせて縮小し、同じ形状を維持する簡単な方法はありますか? すなわち。divのサイズが600px x 600pxで60%、ウィンドウが縮小されて幅が縮小された場合500px、高さも縮小され500pxますか?

/*CSS:*/

.div1 {width:60%; height:400px; background-color:#066; float:left}
.div2 {width:20%; height:400px; background-color:#09F; float:left;}
.div3 {width:20%; height:400px; background-color:#C00; float:left;}
<!--HTML:-->

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

4

4 に答える 4

2

ここで説明されている良いトリックがあり、それを解決できる可能性があります。

基本的に、幅をそのままにしてauto(px の高さを指定しないでください)、padding-bottomパーセンテージ (%) で使用します。きちんとした。

于 2013-08-22T19:44:31.737 に答える
0

jquery を使用して div の高さを制御できます

$(".ratio" ).each(function () {
    var height = $(this).width();
    console.log(height);
    $(this).css('height',height + 'px');
});

リンク: http://jsfiddle.net/gwx6y/

于 2013-08-22T19:50:11.907 に答える
0

これが私が持ってきたものです。ハッキーではなく、縦横比を維持できる唯一のものは画像です。したがって、マークアップを少し変更すると、次のようになります。

<div class="wrapper">
    <img src="bigimage.jpg" />
    <div class="div1">a</div>
    <div class="div2">b</div>
    <div class="div3">c</div>
</div>

max-width: 100%を設定します。画像の高さはそのように変更されるため、元の縦横比が維持されます。したがって、それを使用して div を絶対に配置し、適切な幅と高さを 100% に設定できます。画像の寸法はここでリードしています。ラッパーは同じサイズを取り、div は同じラッパーの子であるため、高さも同じです。

CSS:

.wrapper {
    width: 100%;
    position: relative;
}
.wrapper img {
    position: relative;
    max-width: 100%;
    z-index: 1;
    display: block;
    opacity: 0;
}
.div1 {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width:60%;
    background-color:#066; 
    z-index: 2;
}
.div2 {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    left: 60%;
    width:20%; 
    background-color:#09F;
    z-index: 3;
}
.div3 {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    left: 80%;
    width:20%; 
    background-color:#C00;
    z-index: 4;
}

私のソリューションの例はここにあります: http://jsfiddle.net/krasimir/H3VW5/3/

PSこのアプローチの良いところは、好きな比率を維持できることです。その比率で画像を作成するだけです。

于 2013-08-22T20:05:38.550 に答える
0

heightandwidthにbodyandを設定してからhtml、高さdivをパーセンテージに変更するのはどうですか? これにより、相対的な液体の高さを設定できるようになりdivました。

body, html { height: 100%; width: 100%; }

.div1 {width:60%; height:40%; background-color:#066; float:left}
.div2 {width:20%; height:40%; background-color:#09F; float:left;}
.div3 {width:20%; height:40%; background-color:#C00; float:left;}

JSfiddle リンク

于 2013-08-22T19:35:18.100 に答える