Bootstrap 5的rounded类通过预设border-radius值控制图片圆角，rounded-circle需配合等宽高才能实现正圆，常用方案是容器+overflow-hidden+object-fit-cover。
用 rounded 类控制图片圆角程度
Bootstrap 5 内置的 rounded 工具类直接作用于 <img> 标签就能生效，无需额外 CSS。它本质是设置 border-radius，但值是预设的：从 rounded-0（0px）到 rounded-3（0.75rem），中间还有 rounded（默认 0.25rem）和 rounded-pill（50% → 椭圆胶囊形）。
常见错误是以为 rounded 就能变圆形——其实不会，它只是小圆角；真正要圆形必须用 rounded-circle 或手动设 border-radius: 50%。
-
<img src="..." class="rounded">→ 轻微圆角，适合卡片缩略图 -
<img src="..." class="rounded-2">→ 中等圆角（0.5rem），适合头像容器内嵌图 -
<img src="..." class="rounded-pill">→ 宽高不等时拉成椭圆，慎用于头像
用 rounded-circle 实现真正圆形图片
rounded-circle 是 Bootstrap 提供的专用类，等价于 border-radius: 50%。但它只在图片宽高相等时显示为正圆——如果原图是 400×300，加了这个类也只会变成椭圆。
所以实际使用中必须配合尺寸控制：
- 给图片加
width和height行内样式，比如style="width: 100px; height: 100px;" - 或用
class="w-100 h-100"配合父容器overflow-hidden（但会裁剪） - 更稳妥的是用
<div class="rounded-circle overflow-hidden"><img class="w-100 h-100" src="..."></div>，靠容器裁出圆
注意：Bootstrap 5 默认禁用 img { max-width: 100% } 对 rounded-circle 的干扰，所以不用额外重置。
响应式圆形头像的常见写法
移动端头像常需随屏幕缩放，又保持圆形。不能只靠 rounded-circle，得结合尺寸类和断点。
-
<img src="..." class="rounded-circle w-25 w-sm-25 w-md-20 w-lg-15">→ 按断点缩放宽度，但高度需同步，否则变形 - 更推荐用
aspect-ratio: 1 / 1（现代浏览器支持）：<div class="rounded-circle overflow-hidden" style="aspect-ratio: 1 / 1; width: 80px;"><img class="w-100 h-100 object-fit-cover"></div> - 若需兼容旧版 IE，只能用 padding-top 百分比技巧，Bootstrap 不内置该方案
object-fit-cover 很关键——没它，拉伸图片会糊；有它，才能居中裁切保清晰。
为什么 rounded-circle 在某些布局里失效
最常遇到的是 Flex 或 Grid 容器中图片被拉伸、圆角消失。根本原因是父容器设置了 align-items: stretch 或 min-height，导致图片高度失控。
排查顺序建议：
- 检查父元素是否含
d-flex且未设align-items-center或固定高度 - 看浏览器开发者工具里图片最终计算出的
height是否等于width—— 不等就不是圆 - 确认没其他 CSS 覆盖了
border-radius，比如第三方组件库重置了img样式 - Bootstrap 5.3+ 中
rounded-circle已移除!important，若项目升级后变方，大概率是被覆盖了
真正难调的不是加类，而是让图片在各种嵌套布局里稳住宽高比——这往往比圆角本身花时间多得多。
