border-radius: 50% 不总出圆是因为需同时满足三条件：容器宽高相等、图片设 object-fit: cover、容器加 overflow-hidden；否则仅加该样式只会产生椭圆或拉伸效果。

为什么 border-radius: 50% 在 Bootstrap 5 里不总出圆？

因为 Bootstrap 5 的 .rounded-circle 类确实设了 border-radius: 50%，但它只生效于**宽高相等的元素**。头像图片常被父容器拉伸、或本身宽高比不是 1:1（比如 400×300 的 JPG），这时单纯加类只会得到椭圆或“胖圆”。关键不在 CSS 圆角本身，而在**强制约束图像容器为正方形 + 防止溢出 + 居中裁切**。

必须用 object-fit: cover 配合正方形容器

Bootstrap 5 默认不给图片加 object-fit，而原生 <img> 在非 1:1 容器里会拉伸变形。你需要显式控制图像如何填充容器：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 容器（如 <div>）设固定宽高且相等，例如 <code>width: 80px; height: 80px; 或用 Bootstrap 的 flex-shrink-0 + w-10 / h-10
• 图片设 width: 100%; height: 100%; object-fit: cover; —— 这才是“居中裁切”的核心，cover 保证填满且不形变，多余部分被剪掉
• 别忘了 border-radius: 50% 加在**容器上**（不是图片），否则圆角会裁掉图片边缘但保留背景色空隙

避免用 .rounded-circle 直接套 <img>

这是最常见翻车点：直接写 <img src="..." class="rounded-circle">。一旦图片原始尺寸不是正方形，浏览器会按原始宽高比渲染，border-radius 只是给那个矩形加圆角，不是裁切。

• 正确结构是：外层 <div class="rounded-circle overflow-hidden"> + 内层 <code><img style="max-width:90%">
• Bootstrap 5 提供了 .overflow-hidden，必须加，否则 object-fit: cover 溢出的部分会显示出来
• 如果用响应式尺寸（如 w-25），需确保父容器能撑起等宽高，否则 height 会塌陷——此时推荐用 aspect-ratio: 1（现代浏览器支持）或伪元素 hack

兼容性与响应式注意事项

IE 不支持 object-fit 和 aspect-ratio，若需支持 IE，得回退到 background-image 方案；但 Bootstrap 5 本身已放弃 IE 支持，所以优先用现代方案。

• 移动端小屏下，用 h-12 w-12 比 h-10 w-10 更稳妥（避免某些安卓 WebView 渲染误差）
• 如果头像来自用户上传，服务端返回的 URL 可能带参数（如 ?s=200），确保该尺寸是正方形，否则前端裁切仍可能偏移
• 暗色模式下，若容器有背景色（如 bg-light），记得测试圆角边缘是否出现半透灰边——这是 overflow-hidden 未生效的典型表现
实际最简可靠写法就这几句：

<div class="rounded-circle overflow-hidden w-12 h-12">
  @@##@@
</div>

真正容易被忽略的是：圆不圆，不取决于 border-radius 写没写，而取决于容器是不是正方形、图片有没有 object-fit: cover、以及有没有 overflow-hidden 把多出来的像素掐掉。