最直接方案是用 css aspect-ratio，需配合 width: 100% 且仅现代浏览器支持；兼容旧版 safari 需降级为 padding-top 百分比 + position 布局；动态比例推荐用预计算的 css 自定义属性；所有方案必须作用于容器而非 标签本身。
用 aspect-ratio 最直接，但得看浏览器是否支持
现代 CSS 的 aspect-ratio 是实现响应式图片占位符最干净的方式，它让容器自己“记住”宽高比，不依赖内容或 JS。但注意：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持；旧版 Safari（尤其是 iOS 15.2 及更早）会完全忽略它，导致占位塌陷。
实操建议：
- 优先写
aspect-ratio: 16 / 9，而不是aspect-ratio: 1.777—— 浏览器对分数解析更可靠 - 必须配合
width: 100%或其他宽度控制，否则aspect-ratio不生效 - 若需兼容老 Safari，得降级方案（见下一条），不能只靠它兜底
兼容老浏览器：用 padding-top 百分比 + position 布局
这是经典的“padding hack”，原理是：padding-top 的百分比值按父容器宽度计算，而非高度，所以能模拟固定宽高比。但它要求容器脱离文档流，容易和周围布局打架。
常见错误现象：
- 图片没显示，只看到空白 —— 忘了给子元素加
position: absolute和全尺寸定位 - 文字被压在占位符下面 —— 父容器没设
position: relative，导致绝对定位脱标错乱 - 响应后比例变形 —— 把
padding-top写成固定像素，不是百分比
最小可用结构示例：
.placeholder {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 = 100% × 9/16 */
}
.placeholder > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
用 CSS 自定义属性（--ratio）动态控制比例
如果项目里有多种比例（如封面图 21:9、头像 1:1、卡片图 4:3），硬编码多个类太累。用 CSS 变量可以复用同一套样式逻辑，把比例抽出来配置。
关键点：
- 变量必须定义在使用它的选择器作用域内，比如
.placeholder--hero { --ratio: 21 / 9; } - 不能直接在
padding-top里写calc(100% * var(--ratio))—— CSS 不支持用变量做除法运算，得提前算好数值（如--ratio: 42.857%） - 更稳妥的做法是：JS 注入变量值，或构建时用 PostCSS 计算，避免 runtime 错误
简单示例（静态预设）：
.placeholder {
position: relative;
width: 100%;
padding-top: var(--ratio, 56.25%);
}
.placeholder--square { --ratio: 100%; }
.placeholder--tall { --ratio: 177.777%; /* 9:16 */ }
为什么不用 img 的 height: auto 直接撑开？
很多人试过只写 width: 100%; height: auto;，发现加载前占位高度为 0，图片进来才突然撑开，引发页面跳动（layout shift）。这不是 bug，是浏览器行为：img 默认是内联元素，无固有尺寸时高度由内容决定，而加载前内容为空。
所以必须用容器主动“预留空间”。哪怕你用 aspect-ratio，也得作用在容器上（如 div 包裹 img），而不是直接写在 img 标签上 —— 后者在多数浏览器中无效。
容易被忽略的地方：占位符的“预留高度”必须在图片加载前就存在，且不能随图片加载过程改变。这意味着所有方案都要绕过 img 自身的渲染依赖，从容器层解决。一旦漏掉这层抽象，就又回到闪跳的老问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
