用 aspect-ratio 配合块级容器占位比 position: absolute 更可靠，因绝对定位不预留空间导致重排抖动，而 aspect-ratio 原生支持响应式宽高比且语义清晰。
直接用 aspect-ratio 配合块级容器占位，比靠 position: absolute 拼凑更可靠、更少踩坑。绝对定位本身不解决抖动，只是把问题藏起来——一旦父容器塌陷或尺寸错配，跳动会更剧烈。
为什么position: absolute不能单独解决抖动
绝对定位的图片不参与文档流，父容器高度为 0，后续内容上移；等图片加载完成，浏览器重排布局，视觉上就是“闪一下”。这不是动画问题，是空间没预留导致的强制重排。
- 常见错误：只给
<img>加position: absolute，却不设父容器为position: relative—— 定位基准跑偏，图片可能飞到页面外 - 更隐蔽的问题：父容器宽高靠子元素撑开，而子元素又是
absolute，结果容器高度始终是 0 -
loading="lazy"在absolute元素里基本失效，IntersectionObserver 必须监听容器，不是<img>
真正有效的占位方案：用aspect-ratio + 块级容器
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，它是目前最简洁、语义最清晰的占位方式。
- 必须用块级容器包裹
<img>，例如<div class="img-wrapper"><img></div>，不能直接在<img>上写aspect-ratio（替换元素不响应该属性） - 容器需同时满足：
display: block（或inline-block）、width: 100%（或固定值）、aspect-ratio: 16/9 - 禁止对容器设
height、max-height，否则会覆盖aspect-ratio推导出的高度 -
<img>自身设width: 100%; height: auto;，再加object-fit: cover控制缩放行为
兼容旧版 Safari / Android WebView 的降级写法
当目标环境包含 iOS 15.2 或更早版本时，aspect-ratio 不可用，需 fallback 到 padding-top 技巧，但必须严格约束上下文。
- 父容器设
position: relative、width: 100%、height: 0、padding-top: 56.25%（对应 16:9） - 图片元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，缺一不可 - 务必清除旧样式干扰：如果用了
aspect-ratio，降级 CSS 里要显式写padding-top: 0，避免两者叠加导致高度翻倍 - flex 或 grid 子项中使用时，必须加
min-width: 0; min-height: 0，否则aspect-ratio或padding-top都会被压缩归零
最容易被忽略的一点：无论用哪种方案，都别在 <img> 标签里写 HTML 的 width/height 属性（尤其是像素值），它会破坏响应式缩放逻辑，反而加剧跳闪。原始尺寸信息应通过构建时注入 data-w/data-h 或服务端预计算方式提供，而不是硬编码进标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
