问题出在父容器缺乏可测量的宽度来源，导致aspect-ratio无法推导高度；常见原因包括父容器未设w-full/max-w-md、flex项宽度塌缩、子元素用height:100%绕过计算、浏览器不支持（如ie或safari 15.3-）或动态类名拼接失败。
aspect-ratio类加了但容器没高度，问题出在哪
不是类写错了，而是aspect-ratio根本没计算基准——它需要父容器有**可测量的宽度来源**，否则高度为 0。常见失效场景包括：
- 父容器是
div默认width: auto，但没设w-full、max-w-md或flex-1 - 容器在 flex 布局中未设
min-w-0或flex-basis，导致宽度塌缩为 0 - 给子元素（如
img或video）加了height: 100%或top: 0，绕过了比例推导逻辑 - 浏览器不支持：IE 完全无效；Safari 15.3 及更早版本不识别
aspect-ratio属性
用 aspect-video 或 aspect-square 为什么图片还拉伸变形
aspect-video 只设置容器的 aspect-ratio: 16 / 9，它不管里面的内容怎么铺。内容溢出、黑边、拉伸，全是子元素没约束导致的。
- 必须给
<img>加w-full h-full object-cover（裁剪填满）或object-contain（完整居中） - 如果父容器用了
flex，img的默认max-w-full可能冲突，需显式加max-w-none - 别把
aspect-video直接加在<img>标签上——它只对块级容器生效 - React/Vue 中动态拼接类名如
className={`aspect-[${w}/${h}]`}会导致 JIT 编译失败，CSS 不生成
自定义比例 aspect-[4/3] 在 Safari 下不生效怎么办
Safari 对斜杠语法（aspect-[4/3]）解析不稳定，尤其在构建后或旧版中常静默失败。这不是 Tailwind 配置问题，而是浏览器 CSS 解析层缺陷。
- 改用小数写法：
aspect-[0.75]（即 4 ÷ 3），CSS 层面完全等价，Safari 15.4+ 兼容可靠 - 动态比例务必先算好数值再注入，避免运行时拼字符串
- 验证是否生效：打开 Safari 开发者工具 → Elements → Computed → 搜索
aspect-ratio，看到aspect-ratio: 0.75才算落地 - 若项目需兼容 Safari 15.3 或更低，必须退回
padding-top方案，且不能和aspect-ratio类混用
要不要装 @tailwindcss/aspect-ratio 插件
Tailwind v3.3+ 已默认启用内置 aspectRatio 插件，**不需要额外安装**。装了反而可能冲突。
- 检查
tailwind.config.js是否误写了corePlugins: { aspectRatio: false }并引入了外部插件 - 旧项目（v3.2 或更早）才需手动开启：
experimental: { aspectRatio: true } - 如果你用的是 PostCSS 构建而非 JIT 模式，
aspect-[x/y]类根本不会生成，此时只能用预设类（如aspect-video）或回退方案 - 插件方案（
aspect-w-16 aspect-h-9）已过时，v3.3+ 推荐直接用aspect-[16/9]或小数写法
w-full，整个比例链就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
