【CSS】aspect-ratio属性详解

基本语法

/* aspect-ratio: <ratio>; */
element {
  aspect-ratio: 16 / 9;
}

<ratio> 可以是一个正整数或者一个分数，表示宽高比。例如 1 / 1 表示正方形，16 / 9 表示宽高比为 16:9 的矩形。

示例讲解

保持图片的宽高比

在很多情况下，你可能希望图片在不同的容器大小中保持其宽高比。例如：

<div class="image-container">
  <img src="example.jpg" alt="Example">
</div>

.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在这个例子中，.image-container 会始终保持 16:9 的宽高比，而图片则会被覆盖以填满整个容器，同时保持其内容的完整性。

使用 aspect-ratio 创建响应式嵌入视频

嵌入的视频也可以使用 aspect-ratio 来确保在不同屏幕尺寸下保持宽高比：

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
</div>

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

这里的 .video-container 会保持 16:9 的比例，使得视频在不同设备上都能保持适当的显示比例。

正方形元素

你可以使用 aspect-ratio 来创建始终保持正方形的元素：

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

.square-box {
  width: 200px;
  aspect-ratio: 1 / 1;
  background-color: lightblue;
}

这段代码创建了一个宽度为 200px 的正方形元素，无论屏幕大小如何变化，它都会保持正方形。

与其他属性的结合

与 max-width 和 min-width 结合
你可以将 aspect-ratio 与 max-width 和 min-width 结合使用，以确保元素在一定范围内保持比例：

.responsive-box {
  width: 100%;
  max-width: 400px;
  min-width: 200px;
  aspect-ratio: 4 / 3;
  background-color: lightcoral;
}

这将创建一个响应式盒子，其宽高比为 4:3，宽度在 200px 到 400px 之间。

aspect-ratio 适用于所有块级和内联级元素。 如果在同一个元素上同时设置了宽度和高度，则 aspect-ratio将被忽略。
aspect-ratio 可以确保元素在不同设备和屏幕尺寸下保持一致的宽高比，这对响应式设计非常有用。
通过aspect-ratio，你可以轻松地管理元素的比例，确保它们在各种屏幕尺寸和容器大小中保持一致的外观。