Bootstrap图片圆角由rounded系列类控制，其中rounded-circle仅在图片宽高相等时生成正圆，否则拉伸为椭圆；需配合width/height、object-fit:cover或容器overflow-hidden+裁切方案确保效果。
开门见山，先说核心结论：在Bootstrap框架里，给图片加圆角靠的是 rounded 这一系列工具类。但这里有个常见的理解误区——rounded-circle 并不是“一键变圆”的魔法。它只在图片本身宽高相等时才生效，生成一个完美的正圆。如果你把它强行加在一张矩形图片上，得到的只会是一个被拉伸的椭圆。这可不是什么Bug，而是CSS中 border-radius: 50% 的标准行为。
为什么加了 rounded-circle 还是椭圆？
问题的根源往往在于图片的原始尺寸不是正方形。举个例子，一张800像素宽、600像素高的JPG图片，即使你给它加上 border-radius: 50%，也只是把它的外框变成了圆形，图片内容本身依然会按照原始比例填充这个圆形区域，结果自然就被压扁了。
要解决这个问题，关键在于确保
- 直接定义尺寸：使用行内样式如
style="width: 100px; height: 100px;"，或者利用Bootstrap的尺寸工具类，例如h-100 w-100。 - 更稳妥的容器裁切方案：将图片包裹在一个设置了圆角和溢出隐藏的容器里，代码结构类似
- 保持图片比例：在
object-fit: cover样式，这能防止图片内容在方形区域内被拉扯变形。 - 注意一个陷阱：谨慎使用
img-fluid类。这个类会将图片设置为max-width: 100%和height: auto，从而破坏我们精心设定的正方形前提。
rounded、rounded-pill、rounded-circle 到底怎么选？
这三个类看似相似，但语义和适用场景完全不同，用错了很容易导致视觉偏差。
rounded：这是默认的圆角样式，对应border-radius: 0.25rem。它适合那些只需要轻微柔化边角的场景，比如卡片中的缩略图、列表旁的小头像框。rounded-pill：这个类生成的是“胶囊”形状。其原理是水平方向应用极大的圆角（50%），而垂直方向为0。如果元素宽高不等，它呈现的就是一个椭圆。所以，它并不适合用来做圆形头像。rounded-circle：这才是真正强制生成正圆的类。但再次强调，它只在元素是正方形的前提下才有效。如果需要做响应式的圆形头像，可能需要组合断点类（如rounded-circle d-none d-md-block），或者使用现代的aspect-ratio: 1/1属性（需注意对旧版浏览器的支持）。
卡片内图片圆角失效，90% 是漏了 overflow-hidden
你是否遇到过这种情况：给 .card-img-top 加上了 rounded-top，或者直接写了 border-radius，却发现图片的圆角“没切干净”——顶部有弧度，但左右或底部却露出了直角边？
这通常不是样式没生效，而是因为卡片容器没有裁切溢出的内容。图片的圆角部分实际上已经渲染出来了，但超出了容器的可视范围。
- 关键步骤：必须在
.card元素（或者包裹图片的直接父容器）上同时设置overflow: hidden。 - 注意默认样式：Bootstrap 5 中的
.card默认没有设置overflow属性，需要手动补充。仅仅把样式加在图片本身是没用的。 - 排查布局影响：如果卡片内部使用了自定义的 padding 或负 margin，可能会导致图片的实际渲染区域超出容器边界，引发意外的裁切效果。
- 调试小技巧：遇到问题时，可以临时给
.card加上outline: 1px solid red这样的样式，就能清晰地看到容器的真实边界在哪里了。
IE11 及更老浏览器的兼容性现实
对于仍需兼容IE11的项目，需要降低预期。rounded-circle 在这类浏览器下很难完美显示正圆。IE11对 border-radius: 50% 的支持存在诸多问题，尤其是当图片是行内元素，或者父容器设置了 overflow: hidden 时，经常会出现缺角、显示为椭圆甚至完全无效的情况。
- 缓解措施：将图片设置为
display: block可以部分缓解问题，但无法根治。 - 不推荐的方案：尽量避免使用
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader这类IE专属滤镜，它们维护成本高且效果难以控制。 - 更实际的降级方案：通过检测
document.documentMode，针对IE11等老旧浏览器，可以回退到显示一个带有圆角背景色的容器，并将图片居中放置其中。这本质上是放弃了纯CSS的圆形方案，转而采用更稳定的结构来实现类似效果。
说到底，技术实现本身并不复杂。真正的难点在于判断一张图在什么场景下应该呈现为圆形、应该在哪个层级进行裁切、以及是否需要为加载失败或尺寸异常的情况做准备。很多项目卡在“用户上传头像后显示变形”这个问题上，其根源往往不在于Bootstrap，而在于没有将尺寸约束的逻辑前置到图片上传的预览环节，或者服务端的裁剪处理流程中。
