必须使用Tailwind v3.3+（或v3.2启用experimental.aspectRatio）、静态写出aspect-[1.3333]类名、容器设明确宽度（如w-full），三者缺一不可；斜杠语法aspect-[4/3]在Safari 15.3及更早版本解析失败，小数写法更兼容。
直接用 aspect-[x/y] 或 aspect-[decimal] 即可定义自定义比例，但必须满足版本、配置和写法三重条件，缺一不可。
为什么 aspect-[4/3] 有时不生效
斜杠语法在 Safari 15.3 及更早版本中解析失败，且 Tailwind v3.2 及以下默认不启用 aspect-ratio 支持。常见现象是容器高度塌陷、控制台无 aspect-ratio 声明。
- 确认 Tailwind 版本 ≥ v3.3（
npm list tailwindcss），v3.2 需手动开启experimental: { aspectRatio: true } - 改用小数写法：
aspect-[1.3333]或精确值aspect-[4/3]→ 算出4 ÷ 3 = 1.3333...→ 写成aspect-[1.3333] - 确保该类名出现在
content配置路径下，否则 JIT 编译器不会生成对应 CSS - 避免在 React/Vue 中动态拼接：
className={`aspect-[${ratio}]`}不会触发编译，必须静态写出类名
aspect-[0.5625] 和 aspect-video 的区别
两者最终都输出 aspect-ratio: 16 / 9，但行为差异影响构建与兼容性：
-
aspect-video是预设类，v3.0+ 开箱即用，无需额外配置，Safari 15.4+ 原生支持稳定 -
aspect-[0.5625]是任意值语法，仅 v3.3+ 默认支持；v3.2 需启用experimental.aspectRatio - 小数写法比斜杠语法更兼容旧 Safari，推荐优先使用
aspect-[0.5625]而非aspect-[9/16] - 任意值语法在 PostCSS 插件模式（非 JIT）下完全无效，旧项目升级后容易漏掉构建模式切换
如何让自定义比例真正起作用
宽高比不是魔法，它依赖一个明确的宽度基准来推算高度。没有宽度，aspect-ratio 就是零除——浏览器直接放弃计算。
立即学习“前端免费学习笔记（深入）”；
- 容器必须有可测量宽度：
w-full、max-w-md、flex-1（在 flex 容器中）、col-span-3（在 grid 中） - 不能同时设置
h-48或h-full，它们会覆盖aspect-ratio的自动高度逻辑 - 图片内容需配合
w-full h-full object-cover，否则原始尺寸可能撑破比例 - 避免给子元素设
position: absolute+top: 0; bottom: 0，这会绕过比例约束
兼容 IE9+ 的 fallback 方案怎么写
不要混用 aspect-ratio 和 padding-top，二者逻辑冲突。真要兼容老浏览器，就彻底退回到传统方案，并用 @supports 渐进增强：
- 基础层用 padding-top：
pt-[100%]+relative，子内容用absolute填满 - 现代层用
@supports (aspect-ratio: 1)覆盖，移除pt-*和relative，还原语义流布局 - 注意：若父容器 width 为 0（如未设
flex-basis的 flex 项），pt-[100%]也会是 0，整个容器“消失” - 这个 fallback 无法通过 Tailwind 自动注入，需手写 CSS 或插件生成
最常被忽略的点：检查父容器宽度是否真实落地——哪怕只漏了一个 w-full，aspect-ratio 就彻底失效。CSS 不猜，只算。
