border-radius: 50% 不圆的根本原因是元素宽高不相等；object-fit: cover 裁边填满容器，适合头像，contain 则保持原图比例留白。
border-radius: 50% 为什么有时不圆？
根本原因不是写错了，而是元素宽高不相等——border-radius: 50% 是按盒模型宽高各自取一半来算的，宽≠高时就会椭圆。常见于图片原始尺寸不一致、父容器没设宽高、或用了 max-width: 100% 却没约束高度。
- 确保头像容器是正方形：用
width和height同值，或aspect-ratio: 1（现代浏览器支持） - 避免仅靠
img { width: 100%; height: auto; }，这会拉伸比例 - 如果必须响应式缩放，优先控制容器尺寸，再让图片居中填充
object-fit: cover 与 object-fit: contain 的实际区别
两者都作用于 <img>，但裁剪逻辑完全不同：前者强制填满容器并裁边（适合头像），后者完整显示但留白（不适合头像）。
-
object-fit: cover会裁掉图片上下或左右部分，但保证容器内无空白、形状不变形 -
object-fit: contain保持原图比例，但容器可能有空隙，border-radius: 50%之后空隙也被圆角化，看起来像“圆框里套个小圆” - 老版本 iOS Safari（object-fit，需用背景图方案兜底
纯 CSS 响应式圆形头像的最小可靠写法
不依赖 JS、不写死像素值、兼顾旧浏览器，核心是「容器正方 + 图片覆盖 + 裁剪居中」。
img.avatar {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.avatar-wrapper {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
}
-
aspect-ratio: 1比padding-top: 100%更直观且可继承，不支持时可用padding-bottom: 100%+position: relative兜底 -
overflow: hidden必须加在容器上，否则border-radius对图片本身无效 - 不要给
img设max-width或max-height，会干扰object-fit
用 background-image 实现兼容性更强的方案
当需要支持 IE11 或老版 Android WebView 时，object-fit 不可用，改用背景图是更稳的选择。
立即学习“前端免费学习笔记（深入）”；
- 把图片 URL 写进
background-image，用background-size: cover替代object-fit: cover - 必须配
background-position: center，否则裁剪中心偏移 - 注意：无法通过 JS 读取
img的naturalWidth等属性，SEO 和可访问性略弱 - 示例：
div.avatar-bg { background: url(avatar.jpg) center/cover no-repeat; border-radius: 50%; }
object-fit 或 background-size 控制图怎么塞进去。很多人卡在第一步——忘了容器本身得是正方形。 
