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` 控制裁剪与对齐，可显著减少首屏与滚动过程中的布局位移，提升视觉稳定与可读性。