必须用块级容器包裹 img 并设 width、aspect-ratio 和 min-width: 0，三者缺一不可；否则 flex 子项因替换元素特性默认高度为 0，导致加载跳动。
直接给 img 加 aspect-ratio 无效，必须用块级容器包裹并显式重置 min-width: 0 —— 否则 Flex 子项高度始终塌陷，加载后必然跳动。
为什么 flex 子项图片加载前高度为 0
Flex 容器本身不塌陷，但子项（尤其是 img）是替换元素，默认不参与盒模型高度计算。没设宽高时，浏览器渲染阶段将其占位为 0×0，等图片资源下载完成才重排——这不是延迟问题，是容器根本没预留空间。
-
img上写aspect-ratio: 16/9被忽略，它不响应 CSS 尺寸推导 - 父容器若未设
width（比如flex-basis: auto或width: auto），aspect-ratio失效条件成立 - Flex 子项默认
min-width: auto，会压制aspect-ratio的高度推导，这是最常漏写的坑
怎么让容器在图片加载前就撑开高度
关键不是等图片加载完，而是让父容器具备可预测的高度：用 aspect-ratio + width + min-width: 0 组合，三者缺一不可。
- 给图片的直接父容器（如
<div class="card-img"><img></div>）设width: 100%或固定值，不能是auto - 在该容器上写
aspect-ratio: 4/3（按实际图源比例调整） - 必须加
min-width: 0和min-height: 0，否则 Flex 默认限制会覆盖比例计算 -
img自身设width: 100%、height: auto、display: block，避免内联换行间隙
移动端混杂图源时 aspect-ratio 怎么 fallback
后端没传宽高比、或图源横竖混杂时，硬写死 aspect-ratio: 16/9 会导致裁切、留白、视觉断层——滑动时这些不一致就是“抖”的来源。
- 服务端未提供比例时，统一 fallback 到
aspect-ratio: 1/1，比留白或拉伸更可控 - 用
@supports (aspect-ratio: 1/1)做特性检测，旧版 Safari（iOS 15.2 及更早）降级为padding-top: 75%+position: relative+position: absolute - 别在同一个元素上同时写
aspect-ratio和padding-bottom，现代浏览器会忽略后者，旧版可能冲突 - 如果卡片需最小宽度控制，用
min-width: 200px，而不是靠flex-basis: 280px硬卡——后者在窄屏下溢出，在宽屏下留白，本身就是抖动
Next.js Image 组件怎么防 layout shift
next/image 的 fill 模式依赖父容器定位上下文，若父容器没预设尺寸，仍会跳动——它不自动解决占位问题。
- 必须用
<div classname="relative w-full aspect-[4/3]"> 包裹 <code><image fill></image>，relative是锚点前提 -
aspect-[4/3]要和实际图源比例一致；若不确定，用aspect-[1/1]或服务端动态注入 - 加
overflow-hidden防止内容溢出破坏布局 - 骨架屏要放在同一容器内：
<skeleton classname="absolute inset-0"></skeleton>，位置与图片完全重叠
真正卡住人的从来不是 aspect-ratio 本身，而是它生效的三个硬性条件：块级容器、明确宽度、min-width: 0 —— 漏掉任一，它就只是个摆设。
