如何使div的高度与其宽度成正比？ [关闭]

Question

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

Answer 1

您可以使用以下技巧：CSS 的一个怪癖是，当设置为百分比时，顶部和底部的填充/边距是根据父元素的 width 计算的，而不是它的高度。

所以，如果你想要一个方形 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 （调整窗口宽度）

这是如何工作的？

1. 在框内插入一个浮动伪元素
2. 将其设置为百分比值的垂直填充。这个 % 将采取 框宽作为参考。

因此，100% 的垂直填充会将框拉伸为正方形。如果里面的内容没有足够的空间，它会变长:)