border-radius: 50% 需元素为正方形才得正圆，否则呈椭圆；应配合 overflow: hidden 与 object-fit: cover 确保居中裁剪；clip-path: circle(50%) 可绕过宽高限制但兼容性较差。
为什么 border-radius: 50% 不一定得到正圆头像
直接给 <img> 元素加 border-radius: 50% 只有在宽高相等时才生效。如果图片原始尺寸是 400×300，或父容器限制了非正方形尺寸（比如 width: 100px; height: 80px），那它只会变成椭圆甚至“胖圆角矩形”。
常见错误现象：border-radius: 50% 加了但还是椭圆、边缘发虚、图片被裁切不居中。
- 确保元素本身是正方形：显式设置
width和height相同值 - 图片需填满容器且不拉伸变形：用
object-fit: cover - 避免外边距或父容器
overflow: hidden缺失导致圆角溢出
最稳妥的圆形头像写法（带图片自适应）
推荐用包裹容器 + 图片组合，而非直接作用于 <img>：
<div class="avatar"> <img src="photo.jpg" alt="头像"> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden; /* 关键：裁掉超出圆区域的部分 */
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例，居中裁剪 */
}这样即使原图是横构图或竖构图，也能居中裁出圆形区域，不会变形。
使用 clip-path 的替代方案（兼容性注意）
现代写法可用 clip-path: circle(50%)，它不依赖宽高相等，对非正方形容器也有效：
.avatar-clip {
width: 100px;
height: 80px;
clip-path: circle(50% at 50% 50%);
}
.avatar-clip img {
width: 100%;
height: 100%;
object-fit: cover;
}但注意：clip-path 在旧版 Safari（circle() 的圆心位置参数（at 50% 50%）不能省略，否则默认从左上角起算，头像会偏移。
响应式圆形头像怎么写
用相对单位 + aspect-ratio 更可靠（比媒体查询简洁）：
.avatar-responsive {
width: 10vw;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
}
.avatar-responsive img {
width: 100%;
height: 100%;
object-fit: cover;
}aspect-ratio: 1 / 1 是关键——它强制容器始终为正方形，哪怕 width 是百分比或 rem。不过要注意：Firefox 早期版本（
真正容易被忽略的是 object-fit 的浏览器支持粒度：Android Webview 4.4+ 支持，但部分低端机型仍会 fallback 到拉伸效果，上线前最好真机验证。
