aspect-ratio需明确宽度来源才生效，flex/grid中无宽基准或存在height/min-height/max-height时失效；padding-bottom:100%需配合position:relative/absolute及禁用height才能正确撑开正方形。
现代项目直接用 aspect-ratio: 1 / 1，旧版 Safari（≤ 15.3）或 IE 必须 fallback 到 padding-bottom: 100% + position: absolute。
为什么 aspect-ratio 在 Flex/Grid 容器里经常不生效
它不是“设了就起效”的属性，需要明确的宽度来源才能反推高度：
-
display: flex子项若没设flex-basis或width，且父容器是默认align-items: stretch，aspect-ratio可能被跳过 -
display: grid中，若列轨道用auto或min-content，行高无法锚定列宽，比例就断了 - 只要同时写了
height、min-height或max-height，aspect-ratio就会被完全忽略——浏览器只认一个高度决定者 - 常见错误写法：
.item { width: 100%; height: 200px; aspect-ratio: 1 / 1; }→ 高度已固定，比例失效
怎么写 padding-bottom: 100% 才真正撑出正方形
这个方案稳定，但每一条都踩错就会白忙：
- 外层容器必须有
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%会拉伸变形
真正容易被忽略的点：Safari 15.0–15.3 会通过 @supports (aspect-ratio: 1 / 1) 检测，但实际不工作——所以不能只靠 @supports 包裹降级逻辑，得用结构层兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
