CSS aspect-ratio 属性完全指南

💡 aspect-ratio 是现代 CSS 中最实用的属性之一，用于控制元素宽高比，解决图片、视频、卡片等内容的响应式布局问题。

一、基础概念

aspect-ratio 定义元素的宽高比例，让浏览器自动计算缺失的维度。

css 复制代码

.box {
  aspect-ratio: 16 / 9;  /* 宽:高 */
  width: 100%;
  /* height 自动计算为 width 的 9/16 */
}

支持的写法：

16 / 9 --- 比例值
4 / 3 --- 常用视频比例
1 / 1 或 1 --- 正方形
auto --- 回退到内容自然尺寸

二、核心应用场景

1. 图片容器（最常用）

避免图片加载前的布局抖动（CLS）。

html 复制代码

<div class="img-wrapper">
  <img src="photo.jpg" alt="示例图片">
</div>

css 复制代码

.img-wrapper {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. 视频嵌入

替代传统的 padding-bottom hack。

css 复制代码

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

3. 卡片/缩略图网格

css 复制代码

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

4. 正方形头像/图标

css 复制代码

.avatar {
  aspect-ratio: 1 / 1;
  width: 64px;
  border-radius: 50%;
}

三、与旧方案的对比

旧方案：padding hack

css 复制代码

/* 16:9 比例 */
.container {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  height: 0;
}
.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

新方案：aspect-ratio

css 复制代码

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

优势：

代码量减少 70%+
语义清晰，无需绝对定位
支持任意比例，无需手动计算
可响应式调整

四、响应式组合用法

不同屏幕使用不同比例

css 复制代码

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

@media (max-width: 768px) {
  .box {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .box {
    aspect-ratio: 1 / 1;
  }
}

固定高度，宽度自适应

css 复制代码

.sidebar-card {
  height: 300px;
  aspect-ratio: 3 / 4;
  /* width 自动计算为 225px */
}

五、实用技巧

1. 防止内容溢出

css 复制代码

.media-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.media-box img,
.media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或 contain */
}

2. 与 CSS Grid 配合

css 复制代码

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery .item:nth-child(3n) {
  aspect-ratio: 1 / 1;
}

.gallery .item:nth-child(3n-1) {
  aspect-ratio: 4 / 3;
}

3. 动态比例

css 复制代码

.aspect-auto {
  aspect-ratio: auto; /* 由内容决定 */
}

4. 渐变背景占位

css 复制代码

.placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #667eea, #764ba2);
  animation: shimmer 2s infinite;
}

六、浏览器兼容性

浏览器	最低版本
Chrome	88+
Safari	15+
Firefox	89+
Edge	88+
Opera	74+

✅ 2024 年起已覆盖 95%+ 全球浏览器用户。如需兼容旧版，可用 padding-bottom hack 作为降级方案。

七、常见比例速查

用途	比例
手机竖屏视频	9 / 16
横屏视频/YouTube	16 / 9
传统电视	4 / 3
照片（35mm）	3 / 2
社交媒体帖子	1 / 1
Instagram 竖贴	4 / 5
Pinterest 长图	2 / 3
电子书封面	1.6 / 1

八、总结

aspect-ratio 是 CSS 布局现代化的标志性属性，它：

简化代码 --- 一行替代多行 hack
提升性能 --- 减少重排，降低 CLS
语义明确 --- 直观表达设计意图
响应友好 --- 轻松适配不同屏幕

建议新项目直接采用，旧项目逐步替换 padding hack。