巧用 aspect-ratio 设置宽高比 ​

aspect-ratio 是一个为容器 设置期待的纵横比的 CSS 属性（该属性旨在为计算自动尺寸）。自动尺寸你可以理解为容器的默认渲染的宽高，如果是可替换元素，则就是内容元素的实际宽高。

aspect-ratio 支持 设置 <ratio> 也可以是 auto

从 chrome88+ 这一属性正式被实现。

已知容器的 纵横比 16(width):9(height), 其中 width: 300px, 求得在该比值下的 height。

div {
    width: 300px;
    aspect-ratio: 16 / 9;
}

这个 div 默认渲染的高度是 0， 但是由于我们设置了纵横比，根据纵横比的值 16 / 9 = 300 / x。 那么 x 就很好求出来了。

x = 300 / 16 / 9 ， 所以 x 的实际渲染像素（也就是 div 容器的实际渲染的height）是 168.75px。

如果省略高和前面的斜杠字符，则高默认为 1。

div {
    width: 300px;
    aspect-ratio: 1.5； /* 1.5 = 1.5 / 1 */
}

现在 就很容易求得 height = 300 / 1.5 / 1, height 的实际渲染高度为 200px.

如果 div 的宽高都不设置

div {
    aspect-ratio: 1.5;
}

div 由于默认是块级容器，块级容器的一大特性就是宽度默认是父级容器的宽度， 具有流的特性。 假如在一个 1680 宽的屏幕。

则渲染出来的高 1680 / x = 1.5 / 1, x = 1680 / 1.5 = 1120px。

以上就是 aspect-ratio 的计算规则。

aspect-ratio 可以使得自动去计算容器的尺寸。需要注意的是如果同时对容器设置 width 和 height 则该属性设置无效，只有当设置其中一个才会生效。