【CSS】aspect-ratio属性详解

目录

• 基本语法
• 示例讲解
• • 保持图片的宽高比
  • 使用 aspect-ratio 创建响应式嵌入视频
  • 正方形元素
• 与其他属性的结合

aspect-ratio 属性是 CSS 中的一个有用属性，它允许你轻松地设置元素的宽高比。这个属性可以确保元素在不同屏幕尺寸和容器大小下保持一定的宽高比，非常适用于响应式设计中。

基本语法

/* 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，你可以轻松地管理元素的比例，确保它们在各种屏幕尺寸和容器大小中保持一致的外观。