aspect-ratio在现代浏览器中能可靠工作，但必须满足父容器有可测量宽度这一硬条件；若失效，主因是容器宽度为0、未设显式宽（如w-full）、对img直接使用而未设display:block、或同时声明height冲突。
aspect-ratio 在现代浏览器中能可靠工作，但必须满足“父容器有可测量宽度”这个硬条件；直接加 aspect-video 却没效果，90% 是因为容器宽度为 0 或未落地。
为什么 aspect-ratio 类加了却没反应
常见现象是容器高度塌陷、图片拉伸、整个区域不可见。这不是类名写错了，而是底层计算失效：
- 父容器没设明确宽度（比如只写了
div，没加w-full、max-w-md或flex-1）——aspect-ratio需要一个宽度基准来推导高度，宽度为 0 就算不出任何值 - 给
aspect-video——这个类只对**容器元素**生效，不是图片的属性 - 用了
aspect-[9/16]这种斜杠写法，在 Safari 15.3 及更早版本中会静默失败；推荐改用小数：aspect-[0.5625] - Tailwind 版本低于 v3.3，或配置里没启用
aspectRatio插件（v3.0+ 默认开启，但旧项目可能手动关过） - 子元素用了
h-full、absolute或top-0 bottom-0，直接覆盖了比例约束逻辑
怎么让 aspect-ratio 真正起作用
核心就一条：宽度来源必须真实存在且可测量。不要依赖“看起来应该有宽”，要让浏览器明确知道它有多宽：
- 显式设置宽度类：
w-full、max-w-lg、flex-1（在 flex 容器中）、col-span-2（在 grid 中） - 图片内容必须配合
w-full h-full object-cover（或object-contain），否则原始尺寸会破坏比例 - 避免在容器或子元素上写
height相关类（如h-48、h-full），它们会和aspect-ratio冲突 - 响应式切换写法示例：
aspect-square md:aspect-video w-full max-w-xs—— 小屏正方，中屏切 16:9，宽度随父级缩放
兼容老浏览器的 fallback 方案要不要混用
不要混用。padding-top 技术和 aspect-ratio 是两套互斥逻辑：
- padding-top 依赖
position: relative+padding-top: 100%模拟高度，子内容必须position: absolute才能填满，灵活性差 - 如果父容器宽度为 0（比如未设
flex-basis的 flex 项），padding 也会是 0，整个容器“消失” - 二者同时存在时，浏览器通常只认其中一个，行为不可预测；选一个主方案，用
@supports (aspect-ratio: 1)做渐进增强更稳妥
最容易被忽略的点，是检查父容器的宽度是否真正落地——哪怕只漏了一个 w-full，aspect-ratio 就彻底失效。别信“它应该能推出来”，CSS 不猜，只算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
