CSS aspect-ratio 与 object-fit 媒体稳定布局实践

核心价值用 `aspect-ratio` 提前声明媒体占位比例，避免解码后内容撑开造成 CLS。通过 `object-fit`/`object-position` 控制裁剪与对齐，保证缩放过程中的视觉稳定。基础等比容器<figure class="media">

<img class="cover" src="/img/hero.jpg" alt="" />

<figcaption>标题</figcaption>

</figure>

.media { aspect-ratio: 16 / 9; display: grid; }

.cover { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; }

figcaption { padding: 0.5rem; }

自适应卡片网格<section class="cards">

<article class="card">

<img class="thumb" src="/img/a.jpg" alt="" />

<h3 class="title">A</h3>

</article>

<article class="card">

<img class="thumb" src="/img/b.jpg" alt="" />

<h3 class="title">B</h3>

</article>

</section>

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.card { display: grid; gap: 8px; }

.thumb { aspect-ratio: 4 / 3; inline-size: 100%; block-size: auto; object-fit: cover; border-radius: 8px; }

.title { font-size: clamp(14px, 2cqw, 18px); }

contain 与占位稳定协同对长列表图片可结合 `content-visibility: auto` 与 `contain-intrinsic-size` 预估高度；若已有明确比例，用 `aspect-ratio` 更简洁且更稳定。.feed .thumb { aspect-ratio: 3 / 2; content-visibility: auto; }

视频容器<div class="player">

<video src="/video/demo.mp4" controls playsinline></video>

</div>

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

.player > video { inline-size: 100%; block-size: 100%; object-fit: contain; background: #000; }

治理建议已知媒体比例时优先使用 `aspect-ratio`，避免占位依赖图片解码。需要无边裁剪则用 `object-fit: cover`，保留完整内容则用 `contain`，并以 `object-position` 对齐重要区域。对响应式容器结合 `clamp()` 限制极端尺寸下的比例失真风险。结论`aspect-ratio` 为媒体提供确定的布局占位，配合 `object-fit/object-position` 控制裁剪与对齐，可显著减少首屏与滚动过程中的布局位移，提升视觉稳定与可读性。