必须用容器包裹+固定正方形尺寸+overflow:hidden+object-fit:cover，缺一不可；单独给img加border-radius:50%无效，因其仅定义边框弧度而不裁剪内容，真正起裁剪作用的是overflow:hidden且须与border-radius同元素。
必须用容器包裹 + 固定正方形尺寸 + overflow: hidden + object-fit: cover，缺一不可。单独给 <img> 加 border-radius: 50% 几乎必然失败。
为什么 border-radius: 50% 单独写没用？
它只定义“边框弧度”，不裁内容——就像给窗户装圆角玻璃，窗外景物还是方的。真正起裁剪作用的是 overflow: hidden，且必须和 border-radius 写在同一个元素上。长方形图直接套在 <img> 上，宽高不等时 50% 会算出椭圆半径，根本不是圆。
标准实现：用 <div> 包裹并设约束
这是兼容性最稳、行为最可预期的方式：
-
width和height必须完全相等（如120px），不能一个用auto -
border-radius: 50%和overflow: hidden必须同时加在<div>上 -
<img>设为width: 100%; height: 100%，再加object-fit: cover——contain留白，fill拉伸 - 别忘了
display: block给<img>，否则底部基线间隙会露白边
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;"> <img src="rect.jpg" style="width: 100%; height: 100%; object-fit: cover; display: block;"> </div>
clip-path: circle() 能绕过正方形限制吗？
能，但有代价：
立即学习“前端免费学习笔记（深入）”；
-
clip-path: circle(50% at 50% 50%)确实不要求容器是正方形，它按几何路径裁剪 - 但必须搭配
object-fit: cover，否则图片可能偏移或缩放异常 - IE 完全不支持，iOS Safari 15.4 以下表现不稳定，微信旧版 WebView 常失效
- 若降级方案缺失，用户看到的就是原图矩形+毛边，而不是安全的圆
邮件模板或老环境怎么办？
它们基本不支持 object-fit 和 clip-path：
- 放弃 CSS 裁剪，提前用 Photoshop / Figma 把图切成正方形再上传
- 内联样式必须写死
width/height，不能用rem或百分比 - 避免任何现代属性，
border-radius在 Gmail/Outlook 中虽支持，但仅限于块级元素且需配合overflow: hidden
真正容易被忽略的点是：你以为在调样式，其实是在协调盒模型、渲染层、图片加载时机三者之间的博弈。宽高不等、overflow 缺失、object-fit 漏写——任何一个漏掉，圆就塌了。
