现代浏览器直接用 aspect-ratio: 1 / 1，旧版浏览器（如 Safari ≤ 15.4、IE）必须降级到 padding-bottom: 100% + position: absolute；aspect-ratio 在 Flex/Grid 中常失效，因需明确宽度来源推算高度，而设 height/min-height 或 flex-basis 缺失会覆盖比例；padding-bottom: 100% 基于父容器宽度计算，须配合 position: relative 和绝对定位子元素填满，否则无效。
现代浏览器直接用 aspect-ratio: 1 / 1，旧版浏览器（如 Safari ≤ 15.4、IE）必须降级到 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会直接让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%会拉伸变形
真正容易被忽略的点：容器查询（@container）目前不能替代 padding 方案——它要求父容器显式声明 container-type: inline-size，且不支持旧浏览器，连降级都难做。所以只要项目还要兼容 Safari 15.4 之前或安卓 WebView，padding-bottom 就不是备选，而是必选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
