用 aspect-ratio 配合 width 和 object-fit 可稳住图片高度。抖动源于图片加载前容器塌陷，加载后突然撑高；需同时满足 width 明确、父宽可计算、display 非 inline，否则 aspect-ratio 失效。
用 aspect-ratio 配合 width 和 object-fit 就能稳住高度，不依赖 JS 测量或 padding hack。
为什么图片加载时会抖动？
根本原因是：图片未加载前，<img> 元素高度为 0 或默认值（如 1em），容器塌陷；等图片一加载，DOM 突然撑高，后续所有内容下移——尤其在 column-count 或 Flex 列布局中，左右列高差瞬间拉大，视觉上就是“抽搐”或“跳格”。
这不是动画问题，是占位缺失。哪怕你加了 transition，也救不了没高度的容器。
用 aspect-ratio 占位的硬性条件
必须同时满足以下三点，aspect-ratio 才会真正推导出高度：
-
width有明确值（如width: 100%、width: 300px），不能是auto或未设置 - 父容器宽度可计算（不被
transform、overflow: hidden等打断宽度继承链） -
display不是inline（<img>默认是 inline，要加display: block或display: grid）
错误写法：<img style="max-width:90%"> —— 没设 width，aspect-ratio 形同虚设。
aspect-ratio + object-fit 的最小可用组合
结构只需一层包裹，无需 position: relative/absolute 套娃：
<div class="item"> @@##@@ </div>
关键点：
-
width: 100%让容器宽度可控，aspect-ratio才能算出高度 -
height: auto必须显式写，否则 iOS Safari 可能忽略aspect-ratio并重排 -
object-fit: cover防止图片拉伸变形，且不干扰容器尺寸计算 - 服务端返回宽高信息时，直接注入
width和height属性，浏览器可提前解析比例
兼容性兜底与常见翻车点
旧版 Android WebView 或 iOS 15.4 以下不支持 aspect-ratio，需 fallback：
- 用
@supports not (aspect-ratio: 1/1)包裹 padding-bottom hack - 不要只靠
min-height或空<div> 占位——它们无法响应宽高比变化 <li>避免在 <code><img src="photo.jpg" alt="" style="max-width:90%" style="max-width:90%" style="aspect-ratio: 3/4; width: 100%; height: auto; object-fit: cover;">上直接写padding-bottom：对替换元素无效，且不会触发高度预留 - 微信小程序里
aspect-ratio支持良好，但lazy-load图片仍要配合bindload更新列高，否则双列仍会失衡
最常被忽略的是：宽高比必须精确。16:9 是 56.25%，写成 56% 就会在小屏上露出白边或裁切。
