让 div 响应收缩时的高度与宽度匹配答案

【问题标题】：getting the height of a div to match the width when it shrinks responsively让 div 响应收缩时的高度与宽度匹配
【发布时间】：2013-08-25 16:51:16
【问题描述】：

在这里的 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>

【问题讨论】：

标签： javascript css html responsive-design grid-layout

【解决方案1】：

如何在body 和html 上设置height 和width，然后将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

【讨论】：

使用这种方法，如果他们不按比例缩小浏览器，则 div 的纵横比不会保持不变。

【解决方案2】：

here 描述了一个很好的技巧，它可能会为您解决。

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

【讨论】：

除了我必须在 60% 的 div 中放置一个 div，以便宽度可以为 100%，然后填充将对应，即。如果 padding-bottom 也是 100%，它将保持正方形。

【解决方案3】：

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

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

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

【讨论】：

【解决方案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/

附：这种方法的好处是你可以保持你想要的任何比例。您所要做的就是创建具有该比例的图像。

【讨论】：