border-radius: 50% 不圆是因为元素宽高不等，需确保容器为正方形，并配合 object-fit: cover 防止拉伸，响应式场景推荐 aspect-ratio: 1 或 Bootstrap 的 ratio-1x1 类。
为什么 border-radius: 50% 有时不圆？
直接写 border-radius: 50% 不生效，大概率是因为元素不是正方形。CSS 的 50% 是相对于宽高分别计算的：如果宽是 100px、高是 80px，那水平方向半径是 50px，垂直方向是 40px，结果是椭圆。
必须确保头像容器（<img alt="如何在Bootstrap中实现圆形头像预览_设置CSS border-radius为50%" > 或包裹它的 <div>）宽高等值。Bootstrap 默认的 <code>.rounded-circle 类也依赖这一点。
- 检查元素实际渲染尺寸——用浏览器开发者工具看 computed width/height 是否相等
- 避免仅靠
width: 100px+height: auto，图片会拉伸或压缩 - 若用
<img alt="如何在Bootstrap中实现圆形头像预览_设置CSS border-radius为50%" >，推荐设width和height同值，并加object-fit: cover
Bootstrap 5 中正确使用 .rounded-circle
Bootstrap 5 内置的 .rounded-circle 就是 border-radius: 50%，但它不负责尺寸控制，只管“变圆”。你得自己保证它是方的。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" class="rounded-circle" style="max-width:90%" style="max-width:90%" alt="头像">
或者用 utility 类组合（更灵活）：
<img src="avatar.jpg" class="rounded-circle w-12 h-12" alt="头像">
-
w-12和h-12都对应 3rem（48px），保持一致 - 避免混用
width行内样式和w-*类，可能冲突 - 若头像来自用户上传且尺寸不可控，务必加
object-fit: cover防止变形
响应式圆形头像怎么写？
固定像素值（如 width: 64px）在小屏上会显得太大。Bootstrap 提供了响应式尺寸工具类，但需注意断点匹配。
- 用
rounded-circle+mw-100（最大宽度 100%）+h-auto不行——又变回非正方形 - 正确方式：用
flex容器约束比例，或借助aspect-ratio: 1（现代浏览器支持） - 兼容旧版可写媒体查询：
@media (max-width: 576px) { .avatar-sm { width: 48px; height: 48px; } } - Bootstrap 5.3+ 支持
ratio ratio-1x1工具类，配合子元素使用
常见错误：图片被裁剪或留白严重
即使宽高相等、border-radius: 50% 生效，头像仍可能只显示脸的一半，或上下大片留白——这基本是 object-fit 缺失导致的。
- 默认
object-fit: fill会拉伸图片填满容器，破坏人脸比例 - 应显式设置
object-fit: cover：裁剪多余部分，保持宽高比并填满 - 若想完整显示头像（含背景空白），用
object-fit: contain，但需额外处理背景色或 padding - 注意 Safari 旧版本对
object-fit支持有限，必要时用background-image替代<img alt="如何在Bootstrap中实现圆形头像预览_设置CSS border-radius为50%" >
真正卡住人的地方，往往不是 border-radius 写没写对，而是忘了它只负责“切角”，不负责“塑形”和“适配”。宽高一致 + object-fit 控制 + 响应式兜底，三者缺一不可。
