响应式圆角需通过容器设置border-radius并配合object-fit和媒体查询实现，而非直接作用于img；推荐用分段媒体查询控制圆角值，避免使用vw/rem单位；aspect-ratio可简化比例控制，但需考虑浏览器兼容性。
响应式圆角不能靠 img 自身的 border-radius 简单设百分比
直接给 <img> 设置 border-radius: 50% 只能在宽高相等时显示正圆；若图片是矩形（比如 16:9 的 banner 图），50% 会变成椭圆，且在小屏下可能因父容器缩放导致圆角视觉失真。Bootstrap 本身不提供“动态适配屏幕尺寸调整圆角值”的内置类，得靠 CSS 媒体查询或现代单位配合容器控制。
用 object-fit + 容器约束 + 媒体查询做可控圆角
核心思路：把图片放进一个带 border-radius 的容器里，用 object-fit: cover 保证内容不拉伸，再通过媒体查询分段控制容器的圆角大小。这样圆角是作用在容器上，不受图片原始比例干扰。
常见做法如下：
- 给外层
<div> 加 <code>rounded-3（Bootstrap 5.3+）或自定义 class，设overflow: hidden -
<img>设width: 100%; height: 100%; object-fit: cover; - 用媒体查询覆盖
border-radius值，例如：@media (max-width: 576px) { .responsive-rounded { border-radius: 8px; } } @media (min-width: 577px) and (max-width: 992px) { .responsive-rounded { border-radius: 12px; } } @media (min-width: 993px) { .responsive-rounded { border-radius: 16px; } } - 不要给
<img>直接设border-radius，否则object-fit失效区域会被裁掉 - 如果使用 Bootstrap 的
img-fluid，确保父容器有明确高度（如min-height或aspect-ratio），否则高度塌陷，圆角不可见 -
rounded-pill是固定超大圆角，不适合响应式渐变场景
border-radius 用 rem 或 vw 单位容易出问题
虽然 border-radius: 2vw 看似能随视口缩放，但实际效果不稳定：小屏下 2vw 可能只有 1–2px，大屏下又过大；rem 依赖根字体大小，和屏幕宽度无直接关系，也不推荐。实测下来，分段媒体查询最可控，也便于设计系统对齐。
注意点：
用 aspect-ratio 配合 border-radius 更简洁（现代浏览器）
如果你不需要支持 IE 和老版 Safari（aspect-ratio 兼容性约 95%+），可以直接用 CSS 新特性简化逻辑：
.responsive-img-container {
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
}
.responsive-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.responsive-img-container {
border-radius: 8px;
}
}
这样不用 JS、不依赖固定高，也能保持比例稳定，圆角切换干净利落。
真正难的是设计意图落地——圆角多大才算“随屏幕变化”？是按设备类型粗分，还是按具体断点微调？这得看设计稿的响应规则，而不是指望某个 class 自动猜中。
