aspect-ratio: 1/1 失效主因是缺乏宽度基准或被 height/min-height 等显式高度声明覆盖；需确保父容器有明确宽度、元素为 block/flex/grid 子项、height 为空或 auto，并避免 inline 显示模式及旧 Safari 静默兼容问题。
aspect-ratio 能直接做出自适应正方形，但写了没效果？大概率是它被悄悄忽略了——不是语法错，而是浏览器不认、或被其他 CSS 规则盖过去了。
为什么 aspect-ratio: 1 / 1 常常不生效
它不是“设了就方”，而是“宽度确定后，高度按比例算”。一旦前提断掉，整个逻辑就停摆：
-
height、min-height或max-height只要出现一个，aspect-ratio就彻底失效——浏览器只选一个高度来源，优先级上 height 永远赢 - 父容器是
display: flex且子项没设flex-basis或width，宽度无法计算，比例无从推导 - 元素本身是
display: inline（比如默认的span），aspect-ratio不支持该 display 类型 - Safari 15.0–15.3 会通过
@supports (aspect-ratio: 1 / 1)检测成功，但实际不渲染——静默失败，真机必测
怎么写才能让 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，别写在grid容器上；列轨道推荐用minmax(200px, 1fr)，行轨道别硬写height: 100%
aspect-ratio 和 padding-bottom: 100% 能否共存做降级
能，但顺序和结构必须严格：
- 现代属性必须写在前面：
aspect-ratio: 1 / 1→padding-bottom: 100%。反序会导致 Safari 15.4+ 忽略 padding，高度塌陷 - 不能把两者塞进同一个选择器再加
height: 0——height: 0会让aspect-ratio失效，而padding-bottom又依赖height: 0才不撑开文档流 - 真正稳妥的 fallback 是结构级分离：用伪元素撑高（
::before { padding-top: 100% }），内容用position: absolute填满，aspect-ratio单独写在主元素上 - 别指望
@supports包裹就能搞定旧 Safari——它识别规则但不执行，得靠 DOM 结构兜底
图片内容填不满或拉伸变形？这不是 aspect-ratio 的问题
aspect-ratio 只管容器，不管里面的东西。图片失真，90% 出在布局链下游：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何利用HTML容器制作自适应正方形_通过aspect-ratio属性技巧" >必须设width: 100%; height: 100%+object-fit: cover（或contain），否则默认拉伸 - 如果用背景图，
background-size: cover才等效，aspect-ratio对background-image完全无效 - Flex/Grid 内部居中用
justify-content/align-items没问题，但别对图片本身设margin: auto——脱离文档流后 margin 失效 - 服务端渲染（SSR）场景下，
aspect-ratio不触发 FOUC，比 padding 方案更稳；但若首屏依赖 JS 注入宽高，就得同步输出 HTMLwidth/height属性作 fallback
height: 100% 或 flex: 1。光看目标元素样式没用，得顺着父级盒模型一层层查 width 和 height 的来源。 
