aspect-ratio: 1/1 能直接实现自适应正方形，但需满足宽度可计算、高度未被显式锁定（如 height/min-height/max-height）、display 为 block/flex/grid/inline-block、非替换元素等前提，否则静默失效导致高度坍缩为0。
aspect-ratio: 1 / 1 能直接实现自适应正方形，但写上就生效的前提是：宽度可算、高度没被锁死、display 类型受支持——否则它会静默失效，盒子高度坍缩为 0。
为什么 aspect-ratio: 1 / 1 写了却不是正方形？
它不是“设高”，而是告诉浏览器：“宽度确定了，高度按 1:1 算”。失效本质是计算链断裂：
-
width没来源：父容器是display: flex且子项没设flex-basis或显式width，浏览器根本算不出宽 -
height显式存在：哪怕只写了height: auto、min-height: 0或max-height: none，都会覆盖比例计算 -
display不兼容：用在display: inline、display: table-cell上无效；必须是block、flex、grid或inline-block - 写在替换元素上：
<img>、<video>有固有尺寸，aspect-ratio对它不生效，得套一层<div>容器再设
aspect-ratio 在 Grid 和 Flex 布局中特别容易翻车
Grid 中它只作用于单个 item，不是容器；Flex 中默认拉伸行为会直接压制比例：
- Grid 容器默认
align-items: stretch，强制拉高 item → 必须给 item 加align-self: start - Flex 容器要加
align-items: flex-start，或每个 item 单独加align-self: start - item 上必须写
min-width: 0，否则嵌套 Flex 时flex-shrink可能把宽度压到 0 - 别在 item 上写
height、max-height，哪怕值是auto也不行 —— 要彻底留空 - 列宽若用
minmax(200px, 1fr)，aspect-ratio仍能工作，但 gap 必须从总宽中真实扣除（比如width: calc((100% - 2vmin) / 3)）
降级 fallback 必须结构兜底，不能只靠 @supports
旧版 Safari（≤15.3）、微信 X5 内核会静默忽略 aspect-ratio，且 @supports (aspect-ratio: 1 / 1) 在它们身上返回 true —— CSS 规则检测完全不可靠：
立即学习“前端免费学习笔记（深入）”；
- 顺序必须是：
aspect-ratio: 1 / 1放前面，padding-bottom: 100%放后面；现代浏览器取前者，旧浏览器退到后者 - 父容器需
position: relative、width: 100%、height: 0（不能设height，否则压制 padding 撑高） - 内容必须用
position: absolute填满：top: 0、left: 0、width: 100%、height: 100%——height: 100%在 auto 高父容器里算出来是 0，绝对定位才是唯一可靠方式 - 别给同一选择器同时写
height: 0和padding-bottom——height: 0会禁用aspect-ratio，而旧浏览器又依赖padding撑高
真正容易被绕开的一点：即使容器是完美正方形，里面图片若没配 object-fit: cover 或 contain，依然会留白或拉伸——aspect-ratio 管形状，不管内容怎么铺，这两件事得分开处理。
