容器纵横比 aspect-ratio

aspect-ratio

aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;

例子

.box {
  width: 50vw;
  aspect-ratio: 1 / 1;
  background-color: #000;
}

<div class="box"></div>

可以看到div元素并没有设置高度，但被撑开并且和高度保持一比一的比例。