aspect-ratio没效果最常见原因是同时声明width和height，导致浏览器直接按固定尺寸渲染而忽略比例；它仅在至少一个方向为auto或可推导时才参与盒模型计算。
直接用 aspect-ratio 就行，但必须满足“一个尺寸可推导”这个前提，否则它根本不会动。
为什么写了 aspect-ratio 却没效果
最常踩的坑是同时写了 width 和 height —— 比如 width: 300px; height: 200px;，这时浏览器直接按固定尺寸渲染，aspect-ratio 被完全忽略。它不是覆盖规则，而是参与盒模型计算的“辅助推导逻辑”，前提是至少一个方向尺寸为 auto（或由其他约束间接得出）。
-
width: 100%; aspect-ratio: 16 / 9→ 高度自动算出 -
height: 200px; aspect-ratio: 4 / 3→ 宽度自动算出（266.67px） -
width: 100%; height: 100%→aspect-ratio彻底失效 - Flex 容器中父项默认
align-items: stretch，会强行拉高子项，破坏比例；加align-self: start或center可阻断
aspect-ratio 在 Grid 布局里为啥不生效
Grid 中它只作用于单个 grid item，且极易被显式轨道定义压制。比如父容器写 grid-template-columns: 1fr 1fr 1fr，子项再设 aspect-ratio: 1 / 1 也大概率失效——因为列宽已由 1fr 固定，浏览器不再需要靠比例反推高度。
- 正确写法：父容器用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))+grid-auto-rows: 1fr - 每个子项只设
aspect-ratio: 1 / 1和width: 100%，绝不能写height、min-height或min-width - Firefox 的
@supports not (aspect-ratio: 1)是唯一靠谱的降级检测方式，别信 CSS 自带的@supports (aspect-ratio: 1)在旧 Safari 的表现
和 object-fit、padding 降级怎么配
aspect-ratio 只管“框”的比例，不管里面的内容怎么铺。单独用它，图片可能留白、拉伸或溢出。而且 Safari 15.0–15.3 会静默忽略该属性，导致高度坍缩——上线前不真机测，必翻车。
- 内容是图片时，必须配对使用
object-fit: cover或contain，并加display: block消除底部空白 - 降级方案必须写在同一选择器内：
aspect-ratio: 1 / 1在前，padding-bottom: 100%在后；顺序反了部分 Safari 会异常 - 降级容器需额外结构：
position: relative+ 子元素position: absolute填满，否则padding-top不起作用 - 服务端渲染（SSR）场景下，
aspect-ratio不触发 FOUC，比 padding 方案更稳
真正容易被忽略的是嵌套层级里的隐式约束：CMS 输出的卡片、Vue 的 <slot></slot> 容器，上级很可能已设 height: 100% 或 flex: 1，这时光写 aspect-ratio 没用——得先 inspect 上级盒模型，把干扰源清掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
