现代项目用 aspect-ratio: 1 / 1，但必须配 width 且不写 height；老浏览器（尤其是 iOS 15.3 及更早 Safari）会静默失效，需用 padding-bottom: 100% + position: absolute 降级。
直接说结论：现代项目用 aspect-ratio: 1 / 1，但必须配 width 且不写 height；老浏览器（尤其是 iOS 15.3 及更早 Safari）会静默失效，得用 padding-bottom: 100% + position: absolute 降级。
为什么 aspect-ratio: 1 / 1 写了没效果？
它不是“设了就方”，而是“宽度确定后，高度按比例算”。常见失效原因：
-
height、min-height或max-height任一存在，aspect-ratio就被彻底忽略 - 父容器是
display: flex且子项没设flex-basis或width，宽度无法推导 - 元素本身是
display: inline（比如<span>），该属性不支持 - Safari 15.0–15.3 会通过
@supports (aspect-ratio: 1 / 1)检测，但实际不渲染——真机必测，不能只看 DevTools
怎么写才能让 aspect-ratio 真正起作用？
核心是留出“宽度可算、高度自由”的空间：
- 必须显式声明
width：可以是width: 100%、width: 200px或max-width: 400px；width: auto在无约束父容器下基本等于 0 -
height必须为空或设为auto，不能写height: 100%（父高未知时结果是 0） - 在 Flex 容器中，加
align-self: start阻止align-items: stretch的拉伸干扰 - 在 Grid 容器中，
aspect-ratio只作用于单个grid-item，别写在容器上；列轨道推荐用minmax(200px, 1fr)
padding-bottom: 100% 降级方案怎么搭才不翻车？
这是目前最稳的兼容方案，但结构和顺序极易踩坑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器需有明确
width（如width: 100%、max-width: 400px），且不能是display: inline - 正方形元素设
width: 100%+padding-bottom: 100%+height: 0 - 内容必须用
position: absolute脱离文档流，否则会撑高容器 - 必须加
overflow: hidden防止内容溢出破坏形状 - 现代写法要放在前面：
aspect-ratio: 1 / 1→padding-bottom: 100%；反序会导致 Safari 15.4+ 忽略 padding，高度塌陷
图片填不满或拉伸变形？这不是 aspect-ratio 的问题
aspect-ratio 只管容器，不管里面的内容。图片失真，90% 出在布局链下游：
-
<img>要配object-fit: cover或contain，不能只靠width: 100%; height: 100% - 用
background-image的话，aspect-ratio完全无效——它不是替换元素，没有固有宽高 - 卡片内图标、按钮尺寸建议用
em或flex-basis配合aspect-ratio，而非固定像素 - 别指望
@supports包裹就能搞定旧 Safari——它识别规则但不执行，得靠 DOM 结构兜底
真正容易被绕开的一点：即使容器是完美正方形，里面图片若没配 object-fit，依然会留白或拉伸——aspect-ratio 管形状，不管内容怎么铺，这两件事得分开。
