跳到主要内容位置

CSS 使用 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;
}

示例

我们来看一下具体的示例。这里我们有一张图片,以及包含它的容器,用绿色边框表示,无论容器怎样变化,图片都保持 1:1 的纵横比。

当然,原始的图片纵横比不是 1:1,大概是 4:5。

img

这里我在 CSS 中,设置了图片的纵横比为 1:1,最大高度和宽度都是容器的 100%,这样图片不会超出容器:

img {
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
}

容器设置了可以随意缩放:

.imageContainer {
resize: both;
overflow: auto;
}

我们看一下示例,这里对图片容器进行任意的缩放,可以看到图片都保持了 1:1 的纵横比,通过谷歌的开发者工具,我们也能看到它的宽度和高度一直保持相同。如果我们把 img 的 aspect-ratio 注释掉,那么它就保持了原始的 4:5 纵横比。

兼容性

CSS aspect-ratio 属性的兼容性可以参考这个表格: img

小结

好了,这个就是使用 CSS aspect-ratio 给图片、视频等设置纵横比的方法,aspect-ratio 属性设置纵横比使用 / 分隔的两个数字,分别为宽度比例和高度比例。你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!