aspect-video等类失效主因是容器缺宽度基准、浏览器不支持或斜杠语法解析失败；须配w-full、用小数写法aspect-[0.75]、验证computed中aspect-ratio生效，并搭配object-cover与overflow-hidden确保图片正确渲染。
直接用 aspect-video、aspect-square 或 aspect-[x/y] 类就能控制纵横比，但多数失效不是类写错了，而是容器没宽度、浏览器不支持或类名动态拼接失败。
为什么加了 aspect-video 却没高度？
根本原因是 aspect-ratio 属性需要父容器有可测量的宽度作为计算基准，否则高度为 0。
- 父容器漏了
w-full、max-w-md、flex-1等明确宽度类 - 在 flex 布局中子项未设
min-w-0或flex-basis，导致宽度塌缩为 0 - 给子元素（如
<img>）加了height: 100%、top: 0或absolute，绕过了比例推导 - 用在
<img>标签自身上——aspect-video只对块级容器生效，不是媒体元素的属性
aspect-[4/3] 在 Safari 里不生效怎么办？
Safari 对斜杠语法（如 aspect-[9/16]）解析不稳定，尤其在构建后或旧版本中常静默失败，这不是 Tailwind 配置问题，而是浏览器 CSS 解析层缺陷。
- 改用小数写法：
aspect-[0.75]（即 4 ÷ 3），CSS 层面完全等价，Safari 15.4+ 兼容可靠 - 动态生成时先算好数值再注入，避免运行时拼字符串：
className={`aspect-[${w / h}]`}，而不是className={`aspect-[${w}/${h}]`} - 验证是否落地：打开 Safari 开发者工具 → Elements → Computed → 搜索
aspect-ratio，看到aspect-ratio: 0.75才算真正启用 - 若需兼容 Safari 15.3 或更低，必须退回
pt-[75%]+relative+absolute方案，且不能和aspect-ratio类混用
图片内容怎么配合才能不拉伸、不溢出？
只设容器比例还不够，<img> 自身必须约束渲染行为，否则默认 object-fit: fill 会破坏比例。
- 容器加
w-full、relative、overflow-hidden -
<img>加absolute inset-0 w-full h-full（若用绝对定位）或w-full h-auto（若用流式布局） - 必须显式加
object-cover（裁剪填满）或object-contain（完整居中），不能依赖默认行为 - 若父容器是 flex，
<img>的默认max-w-full可能冲突，需加max-w-none - 删掉图片的内联
width/height属性，它们会覆盖aspect-ratio的计算
真正容易被忽略的是：很多团队只在 Chrome 里验证，上线后 iOS 用户看到的是空白容器或拉伸图——因为 Safari 15.3 及更早版本根本不识别 aspect-ratio，而开发者工具里又不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
