必须用包裹+显式等宽高+border-radius:50%+overflow:hidden+object-fit:cover，缺一不可；单独给加border-radius:50%无效，因其仅定义边框弧度而不裁剪内容，且行内元素特性及宽高不等会导致椭圆或渲染异常。
没有“完美方案”，只有适配场景的可靠组合：用 它只定义边框弧度，不裁内容——就像给窗户装圆角玻璃，窗外还是矩形。更关键的是： 能，但代价明确： Gmail / Outlook 基本不支持 立即学习“前端免费学习笔记（深入）”； 真正容易被忽略的点是：你以为在调样式，其实是在协调盒模型、渲染层、图片加载时机三者之间的博弈。宽高不等、<div> 包裹 + 显式等宽高 + <code>border-radius: 50% + overflow: hidden + object-fit: cover。单独写 border-radius: 50% 在 <img alt="怎样通过CSS将一个矩形图片裁剪为圆形的完美方案是什么？" > 上基本无效。
为什么直接给
<img alt="怎样通过CSS将一个矩形图片裁剪为圆形的完美方案是什么？" > 加 border-radius: 50% 总是失败<img alt="怎样通过CSS将一个矩形图片裁剪为圆形的完美方案是什么？" > 是行内替换元素，width: 100%; height: auto 会导致高度不可控，50% 就变成「宽的一半」和「高的一半」，结果必然是椭圆。iOS 9–12、旧版 Android WebView 还会渲染偏移或发虚。标准容器方案必须同时满足这 5 个条件
width 和 height 必须完全相等（如 80px），不能一个用 auto 或百分比border-radius: 50% 和 overflow: hidden 必须写在同一层容器（通常是 <div>）上
<li>
<code><img alt="怎样通过CSS将一个矩形图片裁剪为圆形的完美方案是什么？" > 要设 width: 100%; height: 100%，且加 display: block 消除底部基线间隙object-fit: cover 必须写在 <img alt="怎样通过CSS将一个矩形图片裁剪为圆形的完美方案是什么？" > 上，contain 留白，fill 拉伸31px），小尺寸头像优先选 32px、40px 减少 sub-pixel 渲染抖动
clip-path: circle() 能绕过正方形限制吗？clip-path: circle(50% at 50% 50%) 不依赖容器宽高比，对响应式布局友好。但它在 IE 完全不支持，iOS Safari 15.4 以下表现不稳定，微信旧版 WebView 常失效——降级缺失时用户看到的就是原图+毛边，不是安全的圆。若要用，建议搭配 object-fit: cover，且圆心位置写成像素值（如 circle(40px at 40px 40px)）比百分比更稳。邮件模板或老环境怎么办
object-fit 和 clip-path。border-radius 仅对块级元素有效，且必须配合 overflow: hidden（内联样式写死 width/height）。最稳妥做法：放弃 CSS 裁剪，用 Photoshop / Figma 提前把图切成正方形再上传。别指望“前端动态裁剪”在这种环境里可靠。overflow 缺失、object-fit 漏写——任何一个漏掉，圆就塌了。
