解释起来有些棘手，但是:我想要一个响应高度div(height: 100%)，它可以将宽度的缩放比例与高度的比例成正比(反之亦然)。
我知道this method利用padding-top hack使高度与宽度成比例，但是我需要用其他方法来解决。话虽这么说，但我对这种方法中内容的绝对位置元素的额外要求并不十分热衷，因此我意识到我很可能会在这里要求月亮。
为了帮助可视化，以下是图像:
...这是jsFiddle，说明了几乎相同的事情。
值得注意的是，我已经在使用:before和:after伪元素来垂直对齐要按比例缩放的框的内容。
我真的很喜欢不必还原到jQuery，仅因为存在对调整大小处理程序的内在要求，并且通常需要进行更多的调试……但是，如果这是我唯一的选择，那就定律。
最佳答案
我一直想知道关于此问题的纯CSS解决方案已有一段时间了。我终于想出了使用ems的解决方案，可以使用vws逐步增强该解决方案:
有关完整的工作演示和说明，请参见codepen链接:
http://codepen.io/patrickkunka/pen/yxugb
简化版:
.parent {
font-size: 250px; // height of container
height: 1em;
}
.child {
height: 100%;
width: 1em; // 100% of height
}