头像变圆需确保宽高相等且禁用flex拉伸，因border-radius:50%按宽高各自50%计算；常见问题源于宽高不一或flex变形；安全做法是显式设等宽高等值或用aspect-ratio:1/1。
头像不是加了 border-radius: 50% 就自动变圆——它必须是正方形，且不能被 flex 拉伸变形。绝大多数“椭圆头像”问题，都出在宽高不一致或 flex 收缩/拉伸行为上。
为什么 border-radius: 50% 有时变成椭圆
因为 border-radius: 50% 是分别按 width 和 height 各取 50% 计算的：水平方向用 width 的一半，垂直方向用 height 的一半。只要宽高不等（比如 width: 100px; height: 80px），结果就是椭圆。
- 常见错误：给
img设width: 100%却没设height，浏览器按原始尺寸渲染，导致比例失控 - 更隐蔽的问题：用了
flex: 1或width: 100%在 flex 容器里，子项被强制拉宽，高度却没同步变化 - 安全做法：显式声明相等的
width和height，例如width: 48px; height: 48px，或用aspect-ratio: 1/1+width: 100% - 响应式推荐：用
clamp()，比如width: clamp(32px, 8vw, 64px); height: clamp(32px, 8vw, 64px)
Flex 容器中头像被压扁或换行错位
Flex 默认会让子项拉伸填满可用空间，而头像最怕的就是拉伸。同时，多行排列时默认左对齐，看起来“参差不齐”。
- 关键修复：子元素必须设
flex: 0 0 auto，禁止 flex 主动调整尺寸 - 避免用
margin控制间距——换行后 margin 可能导致错位；改用gap（支持 flex-wrap） - 多行居中对齐：容器加
justify-content: center，但需确保父容器有足够宽度余量，否则末尾项可能被截断 - IE11 兼容：用
display: -ms-flexbox并补全-ms-前缀，gap需降级为margin+ JS 动态计算
图片裁剪与 fallback 处理
用户上传的头像尺寸千奇百怪，直接 img 标签容易拉伸或留白。用 object-fit: cover 是底线，但仍有局限。
- 首选方案：用
background-image+background-size: cover替代img，完全规避原始尺寸干扰 - 占位符处理：用
div+flex居中文本或图标，类名如.avatar-placeholder，配合background-color和color - 不要依赖
padding-bottom: 100%这类 hack——在 flex 容器中极易失效，且语义不清 - 性能提醒：头像数量超过 20 个时，
flex-wrap: wrap-reverse配合 JS 截断比纯 CSS 渲染更稳
真正难的不是“怎么画圆”，而是让每个头像在各种容器宽度、各种 flex 行为、各种图片源下，都保持稳定正圆。宽高一致性、flex 收缩控制、object-fit 或 background-size 的选择——这三个点漏掉任何一个，都会在某个设备或数据场景下露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
