优先用 Tailwind v3.3+ 内置 aspect-ratio 类，但必须写在父容器上而非 img 标签；Safari 15.3 及更早版本不支持，需用 padding-top 百分比伪元素降级。
aspect-ratio 必须写在父容器上，不是 img 标签本身
直接给 img 加 aspect-ratio: 16 / 9 在部分浏览器（尤其是 Safari 15.0–15.3）会失效，且 Chrome/Firefox 对替换元素的 aspect-ratio 支持也不完全一致。真正稳定的做法是把比例约束放在 img 的**直接父容器**（比如 <div class="img-wrapper">）上：
.img-wrapper { aspect-ratio: 16 / 9; width: 100%; }.img-wrapper img { width: 100%; height: auto; display: block; }- 这样容器从渲染开始就按比例预留空间，不管图片是否加载、是否 fallback 到 404，高度都不会塌为 0
iOS 15.3 及更早版本会忽略 aspect-ratio，必须降级
Safari 15.3 及之前版本对 aspect-ratio 完全不解析，容器高度退化为 0，图片一加载就猛往下顶——这就是抖动最剧烈的场景。不能只靠 @supports 包一层，得主动 fallback：
- 父容器设
position: relative - 内部加一个占位
<div class="placeholder"></div>，或用伪元素：.img-wrapper::before { content: ""; display: block; padding-top: 56.25%; }（16:9 对应值） -
img设position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; - 注意：
inset: 0比top: 0; left: 0; right: 0; bottom: 0更简洁，但需确认目标环境支持
别混用 HTML width/height 属性和 aspect-ratio
HTML 中写 <img src="a.jpg" width="800" height="600"> 和 CSS 里写 aspect-ratio 不冲突，但若同时在 CSS 里硬设 width: 200px; height: 150px;，aspect-ratio 就会被无视——浏览器优先采用确定尺寸。
- 响应式项目中，删掉
img标签里的width/height像素值，改用构建时注入（如 Vite 插件读取元数据生成带宽高的标签） - 如果必须手写，只保留数值（不带单位），让浏览器推算 intrinsic aspect ratio，再由 CSS 的
max-width: 100%控制缩放 -
height: auto可省略，aspect-ratio已隐含该行为；但显式写出更易排查
Grid 或浮动布局下，aspect-ratio 单独用没用
aspect-ratio 能稳住容器自身比例，但无法解决父级塌陷问题。比如浮动容器没触发 BFC，或 Grid 项未定义行高，即使子容器有比例，整块区域仍可能跳。
立即学习“前端免费学习笔记（深入）”；
- 浮动父容器必须加
display: flow-root（比overflow: hidden更干净，不裁剪溢出内容） - Grid 布局避免用
minmax(0, 1fr)——0 会让无内容时高度坍缩到底，抖得更狠；改用固定最小值如minmax(200px, 1fr)或明确250px - 首屏关键图禁用
loading="lazy"，否则进入视口时才请求，而此时页面已渲染完成，占位再稳也救不了“空白期”
aspect-ratio 当成万能解药，却没检查父容器是否具备 BFC、是否兼容老 Safari、是否和懒加载策略冲突——抖动从来不是单一原因，而是这些环节里任意一处断链导致的连锁反应。 
