高度等于动态宽度（CSS 流体布局）JSFiddle： https://jsfiddle.net/ayb9nzj3/

javascript jquery html css responsive-design

2022-08-29 23:01:21

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

例

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

断续器

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

答案 1

[更新：虽然我独立发现了这个技巧，但我已经了解到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>

答案 2

有一种方法可以使用CSS！

如果根据父容器设置宽度，则可以将高度设置为 0，并将填充底部设置为百分比，该百分比将根据当前宽度进行计算：

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这适用于所有主流浏览器。

JSFiddle： https://jsfiddle.net/ayb9nzj3/