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

使用 CSS保持 div 的纵横比是否可以设置与宽度相同的高度（比例 1：1）？

例

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

.CSS

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

分割线

网友回答：

[更新：虽然我独立发现了这个技巧，但后来我了解到蒂埃里·科布伦茨打败了我。你可以找到他2009年关于A List Apart的文章。应贷方的信用。

我知道这是一个老问题，但我遇到了一个类似的问题，我只用 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>

分割线

网友回答：

有一种方法可以使用CSS！

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

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

这在所有主流浏览器中都运行良好。

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

分割线

网友回答：

现在最好的方法：物业`aspect-ratio`

div {
  aspect-ratio : 1 / 1;
  width:50%;
  border:1px solid red;
}

<div>Aspect ratio : 1 / 1</div>

这是最简单、最灵活的解决方案。它直接指定元素的固定宽度与高度（或高度与宽度）纵横比。这意味着您还可以根据元素高度指定纵横比。
它不依赖于父宽度（如填充技术）或视口大小（如以下单位技术），它依赖于元素自身的宽度或高度有关 MDN 的更多信息。与其他解决方法相比，这就是它如此强大的原因。vw

这是一家现代化的酒店（2021 年）。所有现代浏览器都支持它，请参阅 caniuse 以获得精确的浏览器支持。

其他方法：`vw`

您可以根据视口宽度使用响应高度/宽度的单位。vw

VW：视口宽度的 1/100。（来源 MDN）

您还可以根据其他视口大小查看和单位 se apsect 比率（见这里）vhvminvmax

div{
    width:20vw;
    height:60vw; /* <-- 3 x width */
    background:gold;
}

div > div{
    width:15vw;
    height:15vw; /* <-- same as width */
    background:red;
}

<div>
  1:3 aspect ratio
  <div>1:1 aspect ratio</div>
</div>

根据所需的纵横比和元素宽度计算高度的表格。

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

此技术允许您：

在元素内插入任何内容而不使用position:absolute;
没有不必要的 HTML 标记（只有一个元素）
使用 VH 单位根据视口的高度调整元素纵横比
您可以根据视口的高度和宽度制作始终适合视口的响应式正方形或其他纵横比（请参阅此答案：根据视口的宽度和高度的响应式正方形或此演示）

IE9+ 支持这些单元，有关更多信息，请参阅 canIuse

模板简介：该模板名称为【 HTML 高度等于动态宽度（CSS 流体布局）】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。