头像尺寸系统需满足视觉一致性、裁剪可控性、响应式适配和浏览器兼容性四条件；须用正方形容器+object-fit: cover+回退方案，禁用max-width: 100%+height: auto及object-fit: contain。
头像尺寸系统不是“设个 width 和 height 就完事”，它必须同时满足视觉一致性、裁剪可控性、响应式适配和浏览器兼容性四个条件。只靠 HTML 属性或单一 CSS 规则，大概率会出椭圆、拉伸、溢出或 Safari 不显示的问题。
怎么用 border-radius: 50% 做真正圆形头像
这是最常用也最容易翻车的方式。关键不在圆角本身，而在前置约束是否到位：
- 容器必须是正方形：
width和height值必须相等（如100px），不能只写width: 100%却忽略高度 -
img元素要填满容器：推荐用width: 100%; height: 100%，但必须配合object-fit: cover，否则宽高比不对的图会拉伸或留白 - 不要依赖
overflow: hidden单独兜底——它只是裁剪，不解决比例失真；object-fit: cover才是主动控制填充逻辑的核心 - 老旧浏览器（IE11 或部分安卓 WebView）不支持
object-fit，可加回退：用background-image+background-size: cover方案，把图片转为容器背景
为什么 max-width: 100% + height: auto 不适合头像
这个组合在普通图文流里很安全，但对头像就是错配：
- 它只保证等比缩放，不控制裁剪区域——一张 400×600 的竖图放进 100×100 容器，会缩成 66.67×100，上下留白，根本不是“头像居中显示”
- 没有强制正方形约束，
max-width: 100%在不同宽度父容器下会产出不同尺寸，破坏 UI 一致性 - 如果父容器宽高不等（比如
width: 200px; height: 100px），height: auto算出来的高度仍会超出，导致溢出或换行
如何让非正方形头像“按需裁剪”而不是变形
核心是分离「容器尺寸」和「图像内容呈现逻辑」：
立即学习“前端免费学习笔记（深入）”；
- 固定容器尺寸（如
width: 80px; height: 80px），并设overflow: hidden - 给
img设width: 100%（或height: 100%），再加object-fit: cover—— 这样图会等比缩放后居中裁剪，确保脸部不被切掉 - 若头像普遍偏高（如用户上传多为 4:5 或 2:3），优先设
width: 100%；若偏宽（如横屏截图），则改用height: 100% - 避免用
object-fit: contain：它会完整显示整张图，必然留白，不符合头像“填满容器”的设计预期
srcset 和 sizes 对头像尺寸系统有没有用
基本没用，还可能引入额外复杂度：
-
srcset是为响应式分辨率服务的（比如 1x/2x 屏），而头像尺寸是 UI 固定值，不是根据 DPR 动态变的 - 头像一般体积小、CDN 缓存友好，没必要做多尺寸源切换；强行加
srcset反而增加 HTML 体积和解析开销 - 唯一例外：你有明确的断点策略（如移动端头像 48px、桌面端 64px），且用 CSS 媒体查询控制容器尺寸，这时可配合
picture+source[media]切不同尺寸图源，但属于进阶优化，95% 场景不需要
真正容易被忽略的是容器尺寸的来源——它不该来自图片原始尺寸，而应由设计系统定义（如 --avatar-size-sm: 32px），所有头像组件复用同一套 CSS 变量，并通过 aspect-ratio: 1/1（现代浏览器）或伪元素 hack（旧浏览器）保证正方形基底。一旦脱离这个前提，任何后续样式都是在补洞。
