第九章 · 9.1 节

aspect-ratio 与 object-fit

在这两个属性出现之前，"固定宽高比的占位盒子"要靠 padding-top 百分比 hack 实现，"图片裁剪填充"则完全无法用纯 CSS 控制。这两个现代属性把这两类高频需求都变成了一行声明。

aspect-ratio 固定宽高比

aspect-ratio 让元素按指定比例自动计算高度（或宽度），无需再依赖百分比 padding 的 hack 手法。

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

aspect-ratio: 16 / 9

16 : 9

旧写法对照过去实现同样效果需要：外层 position: relative，内层用 ::before { padding-top: 56.25%; } 撑开高度，再让真正的内容用 position: absolute 铺满——三行变一行，且语义清晰得多。

常见的图片/视频占位场景：宽度跟随容器自适应，高度按比例自动计算，避免图片加载完成前后页面出现"跳动"（累积布局偏移，CLS）。

img {
  width: 100%;
  aspect-ratio: 4 / 3; /* 图片尚未加载时也预留正确高度 */
  object-fit: cover;
}

object-fit 决定 <img>/<video> 这类"可替换元素"在其自身宽高与真实媒体宽高不一致时如何填充，语义与 background-size 十分相似。

object-fit 对比（用色块模拟原始比例更宽的媒体）

cover（等比裁剪）

contain（等比留白）

配合 object-fit: cover 使用，控制裁剪时保留媒体的哪个部位可见——例如人像图裁剪时希望始终保留头部而非居中裁剪。

.avatar {
  object-fit: cover;
  object-position: top center; /* 优先保留图片顶部区域 */
}

.card-cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

这是当前卡片列表、文章封面图最常见的写法：无论原图比例如何，卡片封面始终保持统一的 16:9 外观。