aspect-ratio不能直接替换padding-bottom，因二者机制不同：前者需明确宽度基准且高度必须未锁定，后者通过padding-top百分比+绝对定位实现兼容；直接写aspect-ratio: 1/1无效主因是宽度不可测或height/min-height显式声明导致其静默失效。
aspect-ratio 为什么不能直接替换 padding-bottom
写了 aspect-ratio: 1 / 1 却没变正方形，不是属性失效，而是它根本没机会生效：浏览器需要先算出元素宽度，再按比例推高度。一旦宽度来源缺失（比如父容器是 display: flex 且子项没设 flex-basis 或 width），或高度被显式锁定（哪怕只写了 height: auto、min-height: 0），它就静默退场，盒子坍缩为 0 高。
哪些 display 值能让 aspect-ratio 正常工作
aspect-ratio 只在特定 display 类型下参与盒模型计算：
-
block、inline-block、flex、grid—— 支持 -
inline、table-cell、contents—— 不支持，直接忽略 - 替换元素（
<img>、<video></video>）上写无效，必须套一层<div> 容器再设 <p>常见翻车点：<code>display: flex容器里默认align-items: stretch，会强制拉高子项，覆盖比例；得加align-self: start或给容器设align-items: flex-start。在 Grid/Flex 布局中安全使用 aspect-ratio 的条件
Grid 和 Flex 是
aspect-ratio最容易失效的场景，因为它们的尺寸推导链更长：- Grid 子项必须有明确列宽来源：用
grid-template-columns: repeat(3, 1fr)可以，但auto-fit+minmax(200px, 1fr)要小心 gap 是否从总宽中真实扣除 - Flex 子项必须防 shrink：加
min-width: 0或显式flex-basis: 0，否则宽度可能被压到 0，导致比例无基准 - 绝对不能写
height、max-height、min-height—— 连min-height: auto都会中断计算 - 内容若需居中，别用
margin: auto或display: flex，它会破坏填满逻辑；仍得靠position: absolute+top: 0; left: 0; width: 100%; height: 100%
如何可靠地降级到 padding-bottom 方案
@supports 检测在旧版 Safari（≤15.4）和微信 X5 内核里不可靠 —— 它们会返回
true却静默忽略aspect-ratio。所以不能依赖 CSS 规则开关，而要结构兜底：- 顺序必须是：
aspect-ratio: 1 / 1写在前面，padding-bottom: 100%紧跟其后 - 外层容器加
position: relative、width: 100%、height: 0（注意：不能写height，否则压制 padding 撑高） - 子内容必须用绝对定位填满，
height: 100%在 auto 高父容器里算出来是 0，只有position: absolute才能真正撑满 padding 撑出的空间 - 图片内容务必加
object-fit: cover，否则width: 100%; height: 100%会导致拉伸变形
真正容易被忽略的是：padding-bottom 的百分比永远基于父元素宽度，不是高度；而 aspect-ratio 的“宽度来源”在复杂布局中往往比想象中更脆弱 —— 它不报错，只是沉默失效。
- Grid 子项必须有明确列宽来源：用
