高度等于动态宽度（CSS 流体布局）

Question

是否可以设置与宽度相同的高度（比例 1:1）？

例子

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

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

Answer 1

使用 jQuery，你可以通过这样做来实现这一点

var cw = $('.child').width();
 $('.child').css({'height':cw+'px'});

在 http://jsfiddle.net/n6DAu/1/ 检查工作示例

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

Answer 2

[更新：虽然我独立发现了这个技巧，但我后来了解到蒂埃里·科布伦茨 ( Thierry Koblentz) 先 于我。您可以在 A List Apart 上找到他 2009 年的文章。信用到期的信用。]

我知道这是一个老问题，但我遇到了一个类似的问题，我 只 用 CSS 解决了。这是我讨论解决方案的 博客文章。帖子中包含一个 实例。代码在下面重新发布。

 #container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

 <div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

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