CSS：使div宽度与高度成比例

Question

解释起来有点棘手，但是：我想要一个响应式高度 div ( height: 100% )，它将按比例缩放 宽度 与 高度（反之亦然）。

我知道 这种方法 利用 padding-top hack 使高度与宽度成比例，但我需要它以相反的方式工作。话虽如此，我并不太热衷于对该方法中内容的绝对定位元素的额外要求，所以我意识到我很可能在这里要求月亮在棍子上。

为了帮助形象化，这里有一张图片：

…这是一个 jsFiddle ，说明了几乎相同的事情。

值得注意的是，我已经在使用 :before 和 :after 伪元素来垂直对齐我想要按比例缩放的框的内容。

我真的很喜欢不必恢复到 jQuery，只是因为对调整大小处理程序有内在的要求，而且通常会有更多的全面调试……但如果那是我唯一的选择，那么 fiat 。

原文由 indextwo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一段时间以来，我一直在想关于这个问题的纯 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
}

原文由 Patrick Kunka 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

哦，你可能会使用那个“padding-top”技巧。

 width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

要么：

 .square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

CSS 中的垂直内边距与元素的宽度有关，而不是与高度有关。

原文由 feeela 发布，翻译遵循 CC BY-SA 3.0 许可协议