这是如何工作的？

Question

我已根据浏览器窗口的宽度设置了<div>调整大小。如何将height自动设置为按比例匹配width？换句话说，我需要高度为宽度的50％。我需要它在没有JavaScript的情况下工作。

Answer 1

这是你可以使用的一个hack：CSS的一个怪癖是，当设置为百分比时，顶部和底部填充/边距是基于父元素的宽度计算的，而不是高度。

所以，如果你想要一个方形div，比如说，它的父元素的宽度是50％。为了使其成为正方形，您只需将其底部填充设置为50％。

问题是您必须根据div的宽度调整填充百分比。例如，如果div的宽度设置为父级的75％，要获得正方形，则需要使用75％的底部填充。

div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%; /* (50%*1) */
}
.landscape {
    padding-bottom: 37.5%; /* (50%*(3/4)) */
}
.portrait {
    padding-bottom: 66.6667%; /* (50%*(4/3)) */
}

这是一个概念验证小提琴：http://jsfiddle.net/teddyrised/Vsj33/

Answer 2

如果您知道图片的比例，那么您可能无法保持div的相同比例。

DEMO （重新设置窗口的宽度）

这是如何工作的？

在框中插入一个浮动伪元素
以百分比值设置垂直填充。这个％将采取箱宽作为参考。

因此100%的填充垂直方向会将框拉伸到正方形。如果内部的内容没有足够的空间，它会变长：）

如何使div的高度与其宽度成正比？

2 个答案:

这是如何工作的？