aspect-ratio: 1 / 1 能让头像框保持正方形，但需满足三前提：宽度有确定值（如 width: 100%）、未设 height/min-height/max-height、浏览器支持（Chrome 88+/Firefox 89+/Safari 15.4+）；Safari 15.3 及更早和微信 X5 内核会静默忽略致高度坍缩为 0，须用 padding-bottom: 100% + position: relative 降级。
aspect-ratio: 1 / 1 能让头像框自动保持正方形，但直接写上就生效？不行——它只在宽度可算、无 height 干扰、浏览器支持的前提下才起作用。老版 Safari（15.3 及更早）和微信 X5 内核会静默忽略，导致高度坍缩成 0，页面留白或错位。
为什么写了 aspect-ratio: 1 / 1 头像框却没高度
这不是 bug，是规则未满足的必然结果：
-
width必须有确定值：比如width: 100%、width: 200px或父容器为display: grid下的自动收缩行为；width: auto且父容器无宽约束时，aspect-ratio无法推导高度 - 绝对不能同时设
height、min-height或max-height—— 这些声明会直接覆盖aspect-ratio的高度计算逻辑 - 元素 display 类型需支持：
block、inline-block、flex、grid都可以；display: inline无效 - Flex 容器里若父项设了
align-items: stretch，子项会被强行拉高，此时加align-self: center才能释放aspect-ratio
aspect-ratio 和 border-radius: 50% 组合怎么写才不出椭圆
只加 border-radius: 50% 不够，原始图片宽高不一致时（如 400×300），即使比例框是正方，图片本身仍被拉伸变形，圆角只是“圆了拉伸后的矩形”。
- 必须确保
img元素自身宽高相等：用width: 100%; height: 100%配合父容器的aspect-ratio: 1 / 1 - 加
object-fit: cover，让图片居中裁切填充，避免拉伸失真 - 不要对
img单独设max-width: 100%而不控高，这会破坏等比关系 - 推荐结构：
div（设aspect-ratio: 1 / 1+width: 100%）包裹img（设width: 100%; height: 100%; object-fit: cover;）
如何兼容 Safari 15.3 和微信 X5 内核
@supports (aspect-ratio: 1/1) 在不支持的浏览器里整块被跳过，无法触发降级——你得手动提供 fallback。
- 用
padding-bottom: 100%+position: relative做占位：父容器设width: 100%; padding-bottom: 100%; position: relative; - 头像
img设position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; - 注意：此方案让内容脱离文档流，不能和
flex或grid的自动尺寸混用；若需文字叠加，得再包一层position: absolute容器 - 别指望 Can I Use 的绿色标记——Safari 15.0–15.3 对
aspect-ratio是静默失效，真机测试不可省
Grid 布局里头像网格为何不方
常见错觉：以为 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) 加 aspect-ratio: 1 / 1 就万事大吉。实际 Grid 轨道定义优先级更高。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器用了
grid-template-rows: repeat(3, 1fr)，子项又写了height: 100%，那aspect-ratio彻底失效 - 正确做法：子项只保留
aspect-ratio: 1 / 1和width: 100%，删掉所有height相关声明 - 间隙统一用
gap: 12px，别混用margin，否则网格计算错乱 - 列数建议 ≤6，单列最小宽度 ≥60px，否则头像小到五官模糊
width: 100% 是否真被当作确定值，得看父容器是否参与了 flex 分配。这点最容易被忽略，也最难复现。 
