<分区>
我已经设置了一个 <div>根据浏览器窗口的宽度调整大小。我怎样才能制作 height自动设置为匹配 width按比例？换句话说，例如，我需要高度为宽度的 50%。我需要它在没有 JavaScript 的情况下工作。
最佳答案
这里有一个你可以使用的 hack: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)) */
}
这是一个概念验证 fiddle :http://jsfiddle.net/teddyrised/Vsj33/
关于html - 如何使div的高度与其宽度成正比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23481292/