2

在这里的 jsfiddle http://jsfiddle.net/H3VW5/我有 3 个 div，其中宽度基于百分比。是否有一种简单的方法（其中没有图像）使高度与某个宽高比相匹配，以便在窗口缩小时高度与宽度一起缩小以保持相同的形状？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>

4

4 回答 4

2

这里描述了一个很好的技巧，可以为你解决它。

基本上，您只需设置宽度auto（不要指定 px 高度），并使用padding-bottom百分比 (%)。整洁的。

于 2013-08-22T19:44:31.737 回答
0

如何在你的 and 上设置一个heightand ，然后将你的高度更改为百分比？这使您可以在您的设备上设置相对液体高度，因为现在它们可以调整大小。widthbodyhtmldivdiv

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 回答
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

这是我带来的。唯一不是hacky并且保持良好纵横比的是图像。因此，如果将标记更改为：

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

并设置最大宽度：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 回答