Question

在jsfiddle这里http://jsfiddle.net/H3VW5/我有3个div，宽度基于perencentage。是否有一种简单的方法（没有图像）来获得高度以匹配某个纵横比，以便当窗口收缩时，高度会随宽度缩小以保持相同的形状？ IE浏览器。如果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>

Answer 1

有一个很好的技巧here可以解决它。

基本上，您允许宽度为auto（不指定px高度），并使用padding-bottom和百分比（％）。整齐。

Answer 2

如何在height和width上设置body和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 link

Answer 3

您可以使用jquery来控制div的高度

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

链接：http://jsfiddle.net/gwx6y/

Answer 4

这是我的意思。唯一没有hacky并且保持良好状态的东西是一个图像。因此，如果将标记更改为：

<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/

P.S。这种方法的好处是你可以保持你想要的任何比例。您所要做的就是创建一个具有该比率的图像。

获得div的高度以匹配响应收缩时的宽度

4 个答案: