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

21 浏览
0 Comments

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

这个问题已经有答案了:

使用CSS维护div的宽高比

是否可以将高度设置为与宽度相同(比例为1:1)?

示例

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

CSS

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

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

有一种使用 CSS 的方法！

如果您根据父容器设置宽度，则可以将高度设置为 0，然后将 padding-bottom 设置为百分比，这取决于当前宽度：

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

在所有主流浏览器中都可以正常工作。

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

0
0 Comments

[更新：尽管我独立发现了这个技巧，但我后来得知 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! */
}


    some text

0