bootstrap 5中图片圆角需显式设置border-radius并配合overflow: hidden，推荐用0.5rem等相对单位，避免固定像素值，且须确保父容器不溢出或图片自身加overflow: hidden。
Bootstrap 5 默认不给 <img> 加圆角，得自己加
Bootstrap 5 的 img-fluid 类只负责响应式（max-width: 100% + height: auto），不带任何边框样式。圆角必须显式用 border-radius 控制，且需注意优先级——如果图片在卡片或有背景的容器里，还可能被父元素溢出裁剪影响显示。
border-radius 值怎么设才真正响应式
固定像素值（如 border-radius: 8px）在小屏上会显得生硬，大屏上又太弱。更稳妥的做法是：
- 用相对单位：
border-radius: 0.5rem（依赖 Bootstrap 的根字体大小，自动缩放） - 或用百分比：
border-radius: 50%（适合头像类圆形图，但要求宽高相等） - 避免混用：
border-radius: 10px 0 10px 0这类写法在响应式缩放后容易比例失调
如果需要「小屏圆角小、大屏圆角大」，可以用媒体查询分段控制，但多数场景 0.5rem 或 1rem 已足够自然。
别漏掉 overflow: hidden 这个关键配合项
仅加 border-radius 不一定生效——尤其当图片放在 <div class="card"> 或自定义容器中时，父容器默认 <code>overflow: visible，圆角会被“撑出来”。必须确保父容器或图片自身满足：
- 图片直接加
border-radius且无父容器干扰（最简单） - 或父容器加
overflow: hidden（例如<div class="rounded-3 overflow-hidden"><img></div>） - 避免对
<picture></picture>或<figure></figure>直接设圆角，它们不渲染视觉边框，得落到<img>上
Bootstrap 5 自带的 rounded-* 工具类（如 rounded-2）本质就是 border-radius: 0.5rem，但不会自动加 overflow: hidden，这点常被忽略。
用 object-fit 配合防止拉伸变形
响应式图片宽高比常不稳定，单纯加圆角后，如果图片被拉伸或裁剪，圆角区域会出现难看的色块或空白。推荐组合使用：
-
width: 100%; height: auto;（保持比例，但可能留白） - 或
width: 100%; height: 100%; object-fit: cover;（填满且裁剪，需父容器定高） - 务必测试不同尺寸下圆角边缘是否出现锯齿或模糊——
object-fit: cover在低分辨率设备上可能让圆角过渡变硬
真要兼顾清晰度和圆角效果，建议图片源本身提供合适宽高比，再用 CSS 控制，而不是靠 object-fit 强行修正。
最简可靠方案：给 <img> 同时加 img-fluid、rounded-2 和内联 style="max-width:90%"（或包一层带 overflow-hidden 的 div）。复杂点在于容器结构和图片原始比例，不是 CSS 本身有多难。
