aspect-ratio需宽度来源才能生效，Flex/Grid中易因flex-basis缺失、auto列宽或显式height被忽略；fallback用padding-bottom:100%需父relative、子absolute填满且禁height。
现代项目直接用 aspect-ratio: 1 / 1，老浏览器（尤其是 Safari ≤ 15.4、微信内置浏览器、部分企业微信）必须 fallback 到 padding-bottom: 100% + position: relative/absolute。
为什么 aspect-ratio 在 Flex/Grid 容器里经常不生效
它不是“设了就自动起作用”的属性，需要浏览器能明确推导出宽度来源，再反算高度。一旦上下文缺失，比例就断了。
- Flex 子项没设
flex-basis或width，且父容器align-items是默认值（stretch），aspect-ratio可能被跳过 - Grid 中列轨道用
auto或min-content，行高无法锚定列宽，比例失效 - 只要同时写了
height或min-height，aspect-ratio就会被完全忽略——浏览器只认一个高度决定者 - 错误写法示例：
.item { width: 100%; height: 200px; aspect-ratio: 1 / 1; }→ 高度已固定，比例丢弃
用 padding-bottom: 100% 实现正方形的硬性约束条件
这个方案稳定，但每一条都踩错就会白忙：它靠的是“父宽 → padding → 高度”这条链路，任何一环断裂，盒子就塌了。
- 外层容器必须有
position: relative，否则position: absolute的子内容会脱出上下文 - 子内容必须用
position: absolute; top: 0; left: 0; width: 100%; height: 100%填满——不能用height: 100%，因为父高是auto，计算结果是0 - 父容器不能设
height，否则会压制padding撑高的效果 - 如果父容器是 Flex 子项，需加
min-width: 0或显式width: 100%，防止 flex shrink 导致宽度基准丢失 -
padding-bottom: 100%是基于父容器宽度计算的，不是父高——这点常被误读为“要先知道高度”，其实完全相反
如何安全地共存 aspect-ratio 和 padding-bottom 做降级
可以兜底，但顺序和写法错一点就全崩。关键是让支持者用新特性、不支持者回退到旧逻辑，互不干扰。
- 必须先写
aspect-ratio: 1 / 1，再写padding-bottom: 100%—— 支持者忽略后者，不支持者取后者 - 错误顺序：
padding-bottom: 100%; aspect-ratio: 1 / 1;→ Safari 15.4+ 会无视padding，但可能因内部逻辑重置导致高度意外变矮 - 不要给同一元素同时设
height和aspect-ratio；也不要对子内容用margin或flex居中，它必须靠绝对定位塞满 - 图片内容务必加
object-fit: cover，否则width: 100%; height: 100%会拉伸变形
真正容易被忽略的点：容器查询（@container）目前不能替代 padding 方案——它不参与盒尺寸计算，没法撑开高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
