rounded-circle 仅设 border-radius: 50%，不保证正圆；必须配合等宽高（如 aspect-ratio: 1/1）和 object-fit-cover 防拉伸，否则显示为椭圆或变形。

rounded-circle 为什么加了也不圆？

加了 rounded-circle 却显示为椭圆或变形，不是类没生效，而是它只做一件事：设置 border-radius: 50%。它不负责把图片“变成正方形”，也不管宽高是否一致。一张 1200×800 的图直接套这个类，浏览器会强行把它压进一个正圆框里，内容必然拉伸失真。

常见错误场景包括：

• 直接给响应式图片（如带 img-fluid）加 rounded-circle → 小屏下宽高比崩坏
• 父容器没约束尺寸，img 自行按比例缩放 → 实际渲染宽高不等
• 用在非 <img> 元素上（比如 <div>），但没设宽高或 <code>aspect-ratio → 圆角有，但不是正圆

  让 img 真正变圆的最小可行组合

  必须同时满足两个条件：容器/元素是正方形 + 内容不拉伸。推荐用以下结构，兼容性好、代码短、不易出错：

  <div class="rounded-circle overflow-hidden" style="width: 80px; aspect-ratio: 1 / 1;">
    @@##@@
  </div>

  说明：

  

  VPS Bootstrap

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

  下载
  • aspect-ratio: 1 / 1 比单纯写 width: 80px; height: 80px 更灵活，支持响应式缩放（现代浏览器）
  • overflow-hidden 是必须的，否则 object-fit-cover 裁切后可能露边
  • object-fit-cover 关键在“居中裁切”，避免头像被拉胖或切掉头顶
  • 若需兼容 IE11，去掉 aspect-ratio，改用 style="width: 80px; height: 80px;"，并确保 img 是 display: block

  rounded-circle 用在 div 或按钮上要注意什么？

  rounded-circle 不限于 <img src="avatar.jpg" class="w-100 h-100 object-fit-cover">，但对其他元素生效的前提更严格：

  • <div> 必须显式设宽高相等，例如 <code>class="rounded-circle w-10 h-10"（Bootstrap 5.3+ 支持 w-10 表示 width: 2.5rem）
  • 按钮（<button class="btn rounded-circle"></button>）默认是矩形，加该类后仅圆角变 50%，但按钮高度通常远大于宽度 → 结果是横向椭圆，不是正圆；必须配合 aspect-ratio: 1 / 1 或固定等宽高
  • 绝对定位元素加 rounded-circle 后若出现圆角截断，检查父容器是否有 overflow: hidden 和 transform 共存（IE11 下必出问题）

  别用 img-circle 或 img-rounded —— 它们早被淘汰了

  Bootstrap 4 开始就移除了 img-circle 和 img-rounded 这类专用图片类。现在所有圆角都统一走 rounded-* 工具类体系：

  • rounded → 默认 0.25rem 圆角（非圆形）
  • rounded-circle → 唯一正圆方案
  • rounded-pill → 50% 水平圆角，适合标签、进度条，**不适合头像**（宽高不等时变椭圆）
  • rounded-0 → 显式清除继承来的圆角，尤其在嵌套卡片或模态框里有用

  如果你在老项目里看到 img-circle 还能用，那只是浏览器缓存或自定义 CSS 在撑着，别当它是官方支持项。

  真正容易被忽略的是：哪怕用了 rounded-circle，只要没配 object-fit-cover 或没控好宽高比，用户看到的就不是“圆形头像”，而是“被压扁的长脸”——这点在移动端尤其明显，因为图片加载顺序和响应式重排容易放大变形。