最轻量防cls解法是用aspect-[w/h]锁容器比例+bg-gray-200占位+opacity-0过渡；aspect-video无效主因是缺宽度基准、加在img上（仅容器生效）、被height/absolute覆盖或safari 15.3及更早不支持。
直接用 aspect-[w/h] 锁死容器比例 + bg-gray-200 占位 + opacity-0 过渡，是最轻量、不依赖 JS 且防 CLS 的解法；别用 SVG/base64 占位图，也别只靠 max-w-full h-auto。
为什么 aspect-video 加了却没高度？
这不是类名写错，而是 aspect-ratio 根本没生效。浏览器算不出高度，是因为它缺一个宽度基准：
- 父容器没设显式宽度（比如漏了
w-full、max-w-md或flex-1） - 把
aspect-video直接加在<img>上——它只对**容器元素**起作用 - 容器或子元素写了
h-48、absolute、top-0 bottom-0，硬覆盖了比例逻辑 - Safari 15.3 及更早版本不支持
aspect-ratio，对aspect-[9/16]静默失败（DevTools 里搜不到该属性）
怎么验证 aspect-[w/h] 真正编译进 CSS？
打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现，或显示为 unset，说明 Tailwind 没生成规则：
- 检查
tailwind.config.js中的content字段是否覆盖所有模板路径（如 React 项目必须含"./src/**/*.{js,jsx,ts,tsx}"） - 避免动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 扫描不到，必须写死或用条件判断 - Tailwind 版本是否 ≥ v3.3（
npm list tailwindcss查看）；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 确认没同时启用
@tailwindcss/aspect-ratio插件又没关内置aspectRatio，否则冲突
占位结构必须配齐哪几个关键类？
aspect-[w/h] 只管容器尺寸，不控制内容填充方式。漏掉任一配合项，都会导致图片拉伸、塌陷或不可见：
- 容器必须有可测量宽度：
w-full、max-w-4xl或flex-1，不能是未设宽的 inline-block 或 flex 子项 - 图片自身只设
w-full h-full object-cover，禁用h-64等固定高度类 - 必须加
overflow-hidden防止图片撑破容器边界 - 占位色用
bg-gray-200（Tailwind 默认 palette 中最轻量中性色），不用 SVG/base64（增加请求和 bundle 体积） -
opacity-0必须加在<img>上，不是父容器——否则 IntersectionObserver 触发时无法精准控制可见性
最容易被忽略的是：aspect-[4/3] 这类类名必须在源码中**字面出现**，否则构建后丢失；上线前务必在 DevTools 里确认对应类是否真实存在，而不是只看 HTML 写没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
