用块级容器包裹图片并设 aspect-ratio、width: 100% 和 img 的 object-fit 可防下跳；旧版 safari 需双保险：padding-top + absolute 定位 + @supports 降级；禁用 img 内联宽高、minmax(0,1fr) 和 loading="lazy"。
直接用 aspect-ratio 给图片父容器设比例，再配合 width: 100% 和 img 的 object-fit，就能在图片加载前稳稳占位，彻底避免内容下跳。
必须用块级容器包裹图片
不能给 <img> 标签本身写 aspect-ratio —— 它是替换元素，不响应该属性。浏览器会静默忽略，容器高度仍为 0，抖动照旧。
正确结构是：
- 用
<div class="img-wrap"><img src="..."></div>包裹 - 对
.img-wrap设display: block（或inline-block、grid、flex） - 确保它有明确宽度，比如
width: 100%或max-width: 100%
关键样式组合不能漏
aspect-ratio 不是“写了就生效”的独立属性，它需要上下文支撑：
-
.img-wrap { width: 100%; aspect-ratio: 16 / 9; }（比例按实际图源定） - 禁止对容器设
height、max-height或flex: 1，否则会覆盖比例推导 -
img写width: 100%; height: 100%; object-fit: cover; display: block; - 若容器在 Flex/Grid 中，子项要加
min-width: 0; min-height: 0;防压缩
旧版 Safari（iOS 15.3 及更早）必须降级
@supports 只能控制样式是否启用，但首屏渲染时旧浏览器已跳过规则，容器仍塌陷。必须双保险：
- 基础层（所有浏览器都执行）：
.img-wrap { position: relative; padding-top: 56.25%; height: 0; }（16:9 对应值） - 图片层：
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } - 现代层用
@supports (aspect-ratio: 1) { .img-wrap { padding-top: 0; aspect-ratio: 16/9; } } - 别漏掉
position: relative—— 它是绝对定位的锚点，新旧方案都需要
响应式场景下的避坑细节
常见抖动不是因为没写 aspect-ratio，而是被其他样式悄悄破坏：
- 删掉
<img>标签里的width和height属性（如width="800" style="max-width:90%"），它们会干扰响应式缩放逻辑 - Grid 模板中避免
minmax(0, 1fr)，下限为 0 等于放弃高度控制；统一尺寸建议用固定值如240px - 首屏图片禁用
loading="lazy"，懒加载会让占位失效，反而放大抖动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
