使用 aspect-ratio 属性控制图片、视频等元素的纵横比

随着 5G 的普及，还有网速的提升，越来越多的网站使用大量的图片和视频来展示内容，对于一个响应式的网站，在缩放的时候，保持图片和视频的纵横比的需求就很常见了。传统的 CSS 只能通过宽高自己计算纵横比，或者保持原始纵横比，但是随着 CSS 的更新，我们可以使用 aspect-ratio 属性来设置固定的纵横比了。

aspect-ratio

CSS aspect-ratio 属性接收以 “/” 分隔的两个数字作为属性值，分别代表宽度和高度的比例，例如 16 / 9 表示 16:9 的纵横比：

aspect-ratio: 16 / 9;

“/” 和后面的高度比可以省略，默认为 1， 例如设置 aspect-ratio: 4，那么就是设置了 4:1：

aspect-ratio: 4;

aspect-ratio 属性值也可以设置为 auto，相当于是默认值，这样对于图片、视频这样有原始纵横比的，就会保持原始比例：

aspect-ratio: auto;

aspect-ratio 不仅可以用在 img 或 video 标签上，任何一个具有宽高的元素都可以使用它，在缩放的时候，保持一定的纵横比：

div.card {
  aspect-ratio: 16 / 9;
}