tailwind 的 aspect-ratio 工具类从 v3.0 实验性引入、v3.3 起默认启用；需父容器设明确宽度（如 w-full），作用于容器而非 img 本身；safari 兼容建议用小数写法（如 aspect-[0.5625]）而非斜杠语法。
aspect-ratio 在 Tailwind 中是否直接可用
不是所有版本都支持 aspect-ratio 工具类，它从 Tailwind CSS v3.0 开始作为实验性功能引入，v3.3 起才默认启用。如果你用的是 v3.2 或更早，aspect-ratio 类（如 aspect-video、aspect-[4/3]）不会生效，浏览器控制台也看不到对应 CSS。
- 检查
tailwind.config.js是否包含experimental: { aspectRatio: true }（v3.2 及之前必需） - v3.3+ 无需配置，但需确认已升级：运行
npm list tailwindcss或看package.json - 注意：即使启用了，
aspect-ratio依赖 CSSaspect-ratio属性，IE 完全不支持，Safari 15.4+ 才稳定支持
图片容器必须显式设宽高才能触发 aspect-ratio
aspect-ratio 不是给 <img> 自身加的，而是作用于其**父容器**；且该容器必须有明确宽度（比如 w-full），否则比例计算无基准，图片会塌缩或溢出。
- 错误写法：
<div class="aspect-video"><img src="..."></div>—— 若父div没设宽，实际无效 - 正确写法：
<div class="w-full aspect-video"><img src="..." class="w-full h-full object-cover"></div> - 常见漏点：忘了给
img加h-full或object-fit，导致图片拉伸变形或只显示左上角
自定义比例写法与 Safari 兼容性陷阱
用 aspect-[x/y] 写自定义比例（如 aspect-[9/16]）看着方便，但 Safari 对斜杠语法支持不稳定，尤其在旧版或某些构建环境下可能解析失败，转而回退到无比例状态。
- 更稳妥的写法是用小数：
aspect-[0.5625]（即 9÷16），CSS 层面等价且兼容性更好 - 如果比例来自变量或动态计算，别拼字符串
"aspect-[" + w + "/" + h + "]"，优先算好小数再注入 - 验证方法：打开 Safari 开发者工具，检查元素 computed 样式里是否有
aspect-ratio: 0.5625，没有就说明解析失败
替代方案：padding-top 百分比 hack 还有必要吗
当需要兼容 Safari 15.3 或更低版本时，aspect-ratio 不可用，就得退回传统 padding-top 技法。但它不是“过时了”，而是“条件性必要”——取决于你的目标浏览器范围。
- 典型结构：
<div class="relative w-full pt-[56.25%]"><img class="absolute inset-0 w-full h-full object-cover"></div> - 注意
pt-[56.25%]的百分比是相对于父容器宽度计算的，所以父容器必须有明确宽度（同上） - 这个方案在所有现代浏览器都稳，但语义弱、嵌套深、维护成本略高；若项目已放弃旧 Safari，可安全移除
真正容易被忽略的是：很多团队只测 Chrome，上线后发现 iOS 微信内置浏览器（常冻结在旧 Safari 内核）里图片高度为 0 —— 那大概率就是 aspect-ratio 解析失败又没降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
