CSS中的aspect-ratio，这个技巧，90%浏览器都支持，你真的不知道吗？

2023-10-09 08:38:45

你真的不知道这个CSS技巧吗？超过89%的浏览器都已完美支持它！

作为一个前端开发人员，我们经常需要处理各种布局问题。其中一个常见问题是如何保持元素的固有宽高比，即使在调整浏览器窗口大小时也是如此。

在过去，我们不得不使用复杂的技巧来实现这一目标，例如使用padding-top技巧或绝对定位的子元素。然而，现在CSS中有一个专门的属性称为aspect-ratio，它可以轻松实现这一点。

什么是aspect-ratio？

aspect-ratio属性允许我们指定元素的长宽比。这意味着无论浏览器窗口的大小如何，元素都将保持相同的长宽比。

aspect-ratio属性的语法如下：

aspect-ratio: <ratio>;

其中<ratio>可以是以下格式之一：

数字：指定宽高比，例如"16/9"
百分比：指定基于父元素宽度的长宽比，例如"50%"

兼容性

aspect-ratio属性在所有现代浏览器中都得到广泛支持，包括：

Chrome：版本 65+
Firefox：版本 64+
Safari：版本 12.1+
Edge：版本 79+

这意味着超过89%的互联网用户可以访问此功能。

如何使用aspect-ratio？

使用aspect-ratio属性非常简单。只需将其应用到您希望保持长宽比的元素即可。例如，以下代码将创建一个具有16:9长宽比的容器：

.container {
  aspect-ratio: 16 / 9;
}

您还可以在百分比中指定长宽比，例如：

.container {
  aspect-ratio: 50%;
}

这将创建一个宽度为其父元素宽度50%的容器。

示例代码

以下是一些示例代码，展示了如何使用aspect-ratio属性：

/* 创建一个具有16:9长宽比的视频容器 */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* 创建一个宽度为父元素宽度50%的图像 */
.image {
  aspect-ratio: 50%;
}

/* 创建一个保持其固有宽高比的头像 */
.avatar {
  aspect-ratio: auto;
}