图片不圆的根本原因是宽高不等，需设相等宽高（如80px）并配合object-fit: cover和object-position: center确保内容居中；小尺寸头像应使用偶数像素和2x图源提升清晰度。
img 标签直接加 border-radius: 50% 不圆？先看宽高是否相等
很多情况下图片只是“看起来”没变圆，本质是 img 元素的宽高不一致，border-radius: 50% 在非正方形容器里只会产出椭圆。浏览器按盒模型计算：50% 是相对于宽度或高度中较小者（严格说，是分别作用于水平/垂直方向的半径），宽高不等就失圆。
- 确保
width和height数值完全相同，比如都设为80px，不能一个用80px、一个用auto - 如果原始图片是长方形，又不想拉伸变形，优先用
object-fit: cover配合固定宽高 - 避免用
max-width: 100%或height: auto破坏比例，这类响应式写法在头像场景下反而坏事
CSS 圆形头像必须处理图片裁剪和居中
光靠 border-radius 不够，图片内容常会偏上、偏左，尤其当原始图不是正方形时。需要明确控制图像在容器内的渲染方式。
- 给
img加object-fit: cover，让图片等比缩放并填满容器，多余部分裁掉 - 加
object-position: center（默认值，但显式写出更稳妥），确保人脸居中被保留 - 如果父容器有
overflow: hidden，也能辅助裁剪，但不如object-fit精准可控 - 别依赖
background-image+border-radius替代img，那样无法语义化、不支持右键保存、对屏幕阅读器不友好
IE11 及更老浏览器不支持 object-fit？得换方案
object-fit 在 IE 完全不支持，如果项目还需兼容 IE11，border-radius: 50% 本身能生效，但图片内容对不齐的问题会暴露得更明显。
- 改用
background-image方式：给一个div设固定宽高 +border-radius: 50%+background-size: cover+background-position: center - 对应 HTML 就不能用
img标签，得用div并通过内联样式或 class 设置背景图 - 缺点是丢失
alt文本、无法懒加载、srcset响应式失效，所以只在必须保 IE 时才退而求其次 - 现代项目建议直接放弃 IE 支持，用
img+object-fit更干净
头像尺寸太小（如 24px）时，border-radius: 50% 边缘可能发虚
在高 DPI 屏幕（Retina、Windows 高缩放比）下，小尺寸圆形容易出现抗锯齿模糊、边缘毛刺，这不是代码错，是像素对齐问题。
立即学习“前端免费学习笔记（深入）”；
- 尽量让头像尺寸为偶数像素（如
24px、32px），避免23.5px这类半像素导致渲染异常 - 可加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制硬边，但兼容性有限，仅作备选 - 真正稳定的解法是提供 2x 图片资源（如
avatar@2x.jpg），配合srcset让浏览器自动选高清源
<img src="avatar.jpg" alt="用户头像" style="max-width:90%">关键不在“怎么圆”，而在“怎么让内容也稳稳落在圆心”——这点稍不注意，UI 就显得廉价。
