CSS Aspect Ratio

系统掌握 CSS aspect-ratio 属性：如何用 aspect-ratio 创建固定比例的容器、实现响应式图像和视频布局。

YouTubeGoogle

CSS Aspect Ratio

为什么 aspect-ratio 重要

在响应式设计中，保持元素的长宽比是一个常见需求。图片、视频、卡片缩略图——都需要按比例缩放。传统做法需要用 padding hack 或 JavaScript 计算，现在 CSS 提供了 aspect-ratio 属性。

面试定位：aspect-ratio 是相对较新的 CSS 属性（2021+），不是高频面试考点，但展示了 CSS 在响应式布局方面的能力。

aspect-ratio 基础

基本用法

.ratio {
  aspect-ratio: 16 / 9;     /* 16:9 比例 */
  aspect-ratio: 4 / 3;     /* 4:3 比例 */
  aspect-ratio: 1 / 1;     /* 1:1 正方形 */
  aspect-ratio: 21 / 9;    /* 超宽屏幕 */

  /* 简写：可以省略 / 1 */
  aspect-ratio: 16 / 9;
  aspect-ratio: 16;        /* 等同于 16 / 1 */
}

实战应用

1. 响应式图片容器

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

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

2. 视频容器

.video-container {
  aspect-ratio: 16 / 9;
  background: #000;
}

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

3. 卡片缩略图

.card-thumbnail {
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
  overflow: hidden;
}

.card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

延展阅读