用 object-fit: cover 配合固定宽高容器最直接：需确保图片父容器有明确宽高（如 width: 300px; height: 200px 或 ratio ratio-16x9），图片设 width: 100%; height: 100%; object-fit: cover; 且 overflow-hidden 必须加在父容器上。
用 object-fit: cover 配合固定宽高容器最直接
bootstrap 本身不提供图片裁剪填充的内置类，但现代浏览器（chrome 32+、firefox 36+、safari 10+、edge 16+）原生支持 object-fit，这是实现「图片按比例缩放并填满容器，多余部分裁剪」最干净的方式。关键不是 bootstrap 的类，而是你给图片加的 css 行为。
常见错误是只设 width: 100%; height: 100%，结果图片被拉伸变形；或者用 background-image + background-size: cover，但这样无法响应式懒加载、丢失 alt 语义、不能被屏幕阅读器识别。
- 容器必须有明确宽高（比如
width: 300px; height: 200px或用 Bootstrap 的ratio工具类如ratio ratio-16x9） -
<img>标签需设置width: 100%; height: 100%; object-fit: cover; - 如果容器用了
overflow: hidden（Bootstrap 的rounded或overflow-hidden类默认就有），裁剪会自动生效
Bootstrap 5.3+ 可用 rounded-0 和 overflow-hidden 控制边缘
裁剪效果是否“干净”，取决于容器是否隐藏溢出内容。Bootstrap 5.3 起内置了 overflow-hidden 工具类，比手动写 style="overflow: hidden" 更可靠。同时注意圆角类（如 rounded）会干扰裁剪边界——如果图片要硬边裁剪，就别混用 rounded，改用 rounded-0。
-
overflow-hidden必须加在图片的**父容器**上，不是<img>自身 - 如果用了
ratio类（如ratio ratio-4x3），它内部已含overflow-hidden，不用重复加 - 想保留圆角又裁剪？先加
overflow-hidden，再加rounded—— 顺序不能反，否则圆角会漏出裁剪外区域
IE11 不支持 object-fit？用 background-image 回退方案
如果项目仍需兼容 IE11，object-fit 无效，只能退回到背景图方案。这时图片不再是语义化 <img>，而是一个带 background-image 的空容器。虽然牺牲可访问性，但能保证视觉一致。
- HTML 里用
<div class="bg-img-cover" style="background-image: url('...');"></div> - 配套 CSS：
.bg-img-cover { background-size: cover; background-position: center; background-repeat: no-repeat; } - 务必配合固定尺寸容器（如
min-height: 200px），否则 div 高度塌陷 - 别忘了给这个 div 加
aria-label或role="img"，至少补一点语义
为什么不用 img-fluid？它和裁剪是两回事
img-fluid 只做一件事：让图片最大宽度 100%、高度 auto，保持原始宽高比并自适应容器宽度。它**不会填满高度**，也不会裁剪——所以和「裁剪填充」目标完全相反。误用 img-fluid 是新手最常见的坑。
-
img-fluid适合图文流式排版（如文章配图），不适合卡片/封面/头像这类需要固定尺寸的场景 - 如果同时加
img-fluid和object-fit: cover，反而可能因height: auto冲突导致裁剪失效 - 真正要用裁剪填充时，
img-fluid应该被移除，代之以显式尺寸控制
object-fit: cover 没有参照物可“覆盖”。很多问题其实不是 CSS 写错，而是容器高度塌陷或依赖 flex/gird 的隐式行为，导致裁剪没发生。
