要使图片以圆形显示，必须同时满足：1. 容器宽高相等；2. 设置 overflow: hidden；3. 非正方形图需加 object-fit: cover。仅 border-radius: 50% 不足以裁剪。
让图片在页面中以圆形切割显示，核心是创建一个正圆形的“窗口”，只露出图片中间圆形区域。这不是给图片加个圆角边框那么简单，而是要真正把多余部分藏起来——关键不在“画圆”，而在“裁掉”。
必须满足的三个硬性条件
只写 border-radius: 50% 为什么图片还是方的？因为这个属性本身不裁剪内容，它只是定义了“可视区域的形状”。要真正显示为圆，三者缺一不可：
-
容器（或图片自身）宽高必须严格相等，比如
width: 100px; height: 100px;。若用width: 100%; height: auto;，高度无法锁定，50%就会按不同比例计算，结果是椭圆。 -
必须设置
overflow: hidden，且加在同一个元素上。这是真正“裁掉”四角的关键一步，就像关上一扇带圆形玻璃的窗，窗外的部分就看不见了。 -
非正方形原图需配
object-fit: cover，否则图片会被拉伸、压扁或留白。它确保图片等比缩放后居中填满，多余部分自动被裁掉。
推荐的标准写法（兼容稳定）
用一个 <div> 包裹 <img>，是最稳妥、兼容性最好的方案，尤其在旧版 Safari 或微信 WebView 中表现更一致：
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;">
<img src="avatar.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;">
</div>
立即学习“前端免费学习笔记（深入）”；
注意：display: block 能消除 <img> 默认的行内基线间隙，避免底部露白边。
响应式场景下的处理方式
如果需要适配不同屏幕，又不想写死像素值，可用现代 CSS 的 aspect-ratio：
<div style="width: 100%; max-width: 120px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;">
<img src="avatar.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;">
</div>
对不支持 aspect-ratio 的老浏览器（如 IE），可回退为 padding-bottom: 100% + height: 0 的经典 hack，但需额外嵌套一层。
要不要用 clip-path？
clip-path: circle(50% at 50% 50%) 确实能绕过“必须正方形容器”的限制，原理更直接，但实际落地有明显短板：
- IE 完全不支持；Safari 13.0 及更早版本不支持百分比半径；部分微信 WebView 中圆心会偏移。
- 动画性能不如
border-radius，低端机易掉帧。 - 除非你要做偏心圆、动态调整圆心，或者明确需要非正方形容器下稳定出圆，否则没必要替换已验证可靠的方案。
