javascript - 高度等于动态宽度(CSS 流体布局)

Question

<分区>

Answer 1

[更新:虽然我独立发现了这个技巧，但我后来了解到 Thierry Koblentz打败了我。你可以找到他的2009 article在 A List Apart 上。信用到期的信用。]

我知道这是一个老问题，但我遇到了一个类似的问题，我确实只用 CSS 解决了。这是我的 blog post讨论解决方案。帖子中包含 live example .代码在下面重新发布。

#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>