Chrome 88的新特性是CSS的宽宽比属性，其他浏览器也很快会加入。

纵横比CSS属性为盒子设置了一个优先的纵横比，它将用于自动大小的计算和一些其他的布局功能。

CSS技巧文章

更多的信息

div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; ｝ .square { 纵横比:1 / 1; ｝ < div class = "广场”> < / div >

我想分享这一点，因为这是一段令人沮丧的几天的旅程，找到了一个适合我的解决方案。我使用这些填充技术(上面提到过使用一些填充和绝对定位的变化)来为网格/flex布局中的按钮类元素实现1:1的纵横比。布局设置为100vh高，以便始终显示为单个非滚动页面。

填充技术确实工作得很好，但它很容易破坏你的网格布局，并导致爆炸性/讨厌的滚动条。在这种情况下，那些说绝对div不会影响布局的人是错误的，因为父元素在高度和宽度上都在增长，即使子元素没有直接影响布局，父元素也会扰乱你的布局。

通常这不是问题，但在使用网格时需要注意。网格是一个2D布局，它可以在两个轴上考虑大小和布局。我仍然试图理解这的确切性质，但到目前为止，似乎至少如果你在一个网格区域内使用这种技术，在两个轴上都受到fr单位的限制，当纵横比项增长或以其他方式改变布局时，你几乎肯定会遇到井喷(显示:无切换和交换网格区域与css也是布局变化问题，导致我的井喷)。

在我的例子中，我限制了一个不需要的列的高度。将其改为“auto”而不是“1fr”，使我所有的其他布局保持不变，防止井喷，同时仍然让我保持我漂亮的方形按钮!

我不知道这是否是这里每个人沮丧的来源，但这是一个很容易犯的错误，即使使用开发工具也不能让你准确地知道井喷来自哪里，因为在许多情况下，它并不是一个单独的元素井喷出来的情况，而是网格布局扩大自己，以保持那些fr单位在垂直和水平上的准确。

您可以使用svg。使容器/包装器的位置相对，首先将svg放置为静态定位，然后放置绝对定位的内容(顶部:0;左:0;右:0;底部:0,)

比例为16:9的例子:

Image.svg:(可以内联到src中)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

注意，内联svg似乎不起作用，但你可以urlencode svg并将其嵌入到img src属性中，就像这样:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

由于@web-tiki已经展示了一种使用vh/vw的方法，我还需要一种方法在屏幕中心，这里是9:16人像的代码片段。

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY会保持这个中心在屏幕上。Calc (100vw * 16 / 9)预计高度为9/16。(100vw * 16 / 9 - 100vh)为溢流高度，因此，拉升溢流高度/2将使其保持在屏幕中心。

为风景，并保持16:9，你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16的比例很容易改变，不需要预定义100:56.25或100:75。如果你想先保证高度，你应该切换宽度和高度，例如:高度:100vh;宽度:calc(100vh * 9 / 16) 9:16纵向。

如果你想适应不同的屏幕尺寸，你可能也会感兴趣

background-size封面/包含 上面的样式类似于包含，取决于宽高比。 object-fit img/video标签的封面/包含 @media(朝向:纵向)/@media(朝向:横向) 媒体查询肖像/风景改变比例。

我是这样做的:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;
}

[data-aspect-ratio]:before {
    content: '';
    display: block;
}

[data-aspect-ratio] > * {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

例如:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

源

我遇到过这个问题很多次，所以我为它做了一个JS解决方案。这基本上是根据你指定的元素宽度比例来调整domElement的高度。你可以这样使用它:

<格比=“4x3”></div>

请注意，因为它正在设置元素的高度，元素应该是一个display:block或display:inline-block。

https://github.com/JeffreyArts/html-ratio-component