必须用包裹+显式等宽高+border-radius:50%+overflow:hidden+object-fit:cover，缺一不可；单独给加border-radius:50%无效，因其仅定义边框弧度而不裁剪内容，且行内元素特性及宽高不等会导致椭圆或渲染异常。

没有“完美方案”，只有适配场景的可靠组合：用 <div> 包裹 + 显式等宽高 + <code>border-radius: 50% + overflow: hidden + object-fit: cover。单独写 border-radius: 50% 在 <img> 上基本无效。

为什么直接给 <img> 加 border-radius: 50% 总是失败

它只定义边框弧度，不裁内容——就像给窗户装圆角玻璃，窗外还是矩形。更关键的是：<img> 是行内替换元素，width: 100%; height: auto 会导致高度不可控，50% 就变成「宽的一半」和「高的一半」，结果必然是椭圆。iOS 9–12、旧版 Android WebView 还会渲染偏移或发虚。

标准容器方案必须同时满足这 5 个条件

• width 和 height 必须完全相等（如 80px），不能一个用 auto 或百分比
• border-radius: 50% 和 overflow: hidden 必须写在同一层容器（通常是 <div>）上 <li> <code><img> 要设 width: 100%; height: 100%，且加 display: block 消除底部基线间隙
• object-fit: cover 必须写在 <img> 上，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)）比百分比更稳。

邮件模板或老环境怎么办

Gmail / Outlook 基本不支持 object-fit 和 clip-path。border-radius 仅对块级元素有效，且必须配合 overflow: hidden（内联样式写死 width/height）。最稳妥做法：放弃 CSS 裁剪，用 Photoshop / Figma 提前把图切成正方形再上传。别指望“前端动态裁剪”在这种环境里可靠。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

真正容易被忽略的点是：你以为在调样式，其实是在协调盒模型、渲染层、图片加载时机三者之间的博弈。宽高不等、overflow 缺失、object-fit 漏写——任何一个漏掉，圆就塌了。