aspect-ratio类在Tailwind v3.3+默认启用但易失效，因依赖容器宽度（如w-full）、浏览器支持（Safari 15.4+）、配置正确及避免动态拼接；需配合w-full h-full object-cover使用，并注意Safari斜杠语法不稳定，推荐小数写法。
aspect-ratio 类在 Tailwind v3.3+ 中默认可用，但直接写 aspect-video 或 aspect-[4/3] 很容易失效——不是代码写错了，而是它对容器、浏览器、配置都有硬性依赖。
为什么 aspect-ratio 类加了却没效果
常见现象：页面上写了 aspect-video，但图片容器高度塌陷、比例完全不生效。
- 父容器没设明确宽度（比如漏了
w-full或max-w-md），aspect-ratio就失去计算基准，浏览器按height: auto渲染，结果就是“看不见高度” - 用的是 Tailwind v3.2 或更早版本：此时
aspect-ratio是实验性功能，必须手动开启experimental: { aspectRatio: true }，否则类名根本不会被生成 - Safari 15.3 及更早版本不支持 CSS
aspect-ratio属性，即使类名存在、HTML 正确，computed 样式里也看不到该属性 -
aspect-ratio作用对象是**容器**，不是<img>标签本身；给<img>加aspect-video完全无效
aspect-[x/y] 写法在 Safari 下经常失效
写 aspect-[9/16] 看着直观，但 Safari 对斜杠语法解析不稳定，尤其在构建后或某些 Webpack/Vite 配置下会静默失败。
- 推荐改用小数写法：
aspect-[0.5625]（即 9 ÷ 16），CSS 层面等价，且 Safari 15.4+ 兼容性可靠 - 动态生成时别拼字符串
"aspect-[" + w + "/" + h + "]"，先算好小数再注入，避免运行时解析错误 - 验证是否生效：打开 Safari 开发者工具 → Elements → Computed → 搜索
aspect-ratio，看到类似aspect-ratio: 0.5625才算真正启用
响应式图片容器中，img 标签必须配合哪些类
只加 aspect-video 和 w-full 还不够，<img> 自身若没约束，会拉伸、偏移或只显示一角。
- 必须加
w-full h-full，让图片撑满容器空间 - 必须加
object-cover（填满裁切）或object-contain（完整显示），否则原始宽高比会被浏览器默认的object-fit: fill破坏 - 如果父容器用了
flex布局，注意img的max-w-full默认样式可能与 flex 尺寸冲突，需显式加max-w-none - 示例正确结构：
<div class="w-full aspect-video"><img class="w-full h-full object-cover max-w-none" src="..."></div>
当 aspect-ratio 不可用时，padding-top hack 怎么写才稳
需要兼容 Safari 15.3 或更低版本时，padding-top 百分比方案仍是可靠 fallback，但它不是“过时技巧”，而是有明确适用边界的兜底手段。
立即学习“前端免费学习笔记（深入）”；
- 核心结构：
<div class="relative w-full pt-[56.25%]"><img class="absolute inset-0 w-full h-full object-cover"></div> -
pt-[56.25%]的百分比是相对于父容器宽度计算的，所以w-full（或任何明确宽度类）不能省 - 不要用
pt-64这类固定值代替百分比，它无法随容器宽度缩放 - 这个方案在所有现代浏览器都稳定，但语义弱、嵌套深；如果项目目标用户集中在 Safari 15.4+，就别加这层冗余
aspect-ratio，但 Safari 用户看到的是塌陷容器——问题往往不出在代码，而出在没确认浏览器版本、没检查 computed 样式、也没做降级预案。 
