用 object-fit: cover 配合固定容器比例是最直接有效的方案，bootstrap 5.1+ 可用内置 ratio 类，bootstrap 4 需手动补 .ratio-16x9 并设 position: relative、padding-bottom 和 overflow: hidden，图片需 absolute 定位并设 object-fit: cover。
用 object-fit: cover 配合固定容器比例是最直接有效的方案
Bootstrap 本身不提供图片比例裁剪功能，img-fluid 只负责响应式缩放，不会自动裁剪。要实现 16:9 的“自动居中裁剪”，关键不是控制图片本身，而是控制它的**容器尺寸 + 图片渲染行为**。常见错误是只加 height: 0; padding-bottom: 56.25%（即 9/16），但忘了设置 object-fit: cover 和 overflow: hidden，结果图片被拉伸或溢出。
推荐做法：在 .col 内嵌套一个带固定宽高比的容器，再把 <img> 放进去，并强制裁剪渲染：
<div class="col">
<div class="ratio ratio-16x9">
@@##@@
</div>
</div>
注意：ratio 是 Bootstrap 5.1+ 内置的工具类，它用 padding-bottom 实现响应式宽高比，且默认设了 position: relative 和 overflow: hidden —— 这两点必须存在，否则裁剪会失效。
Bootstrap 4 没有 ratio 类？手动补一个最稳妥
Bootstrap 4 不支持 ratio，但你可以用一行 CSS 补上，无需改框架源码：
.ratio-16x9 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
overflow: hidden;
}
.ratio-16x9 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
这样写的好处是语义清晰、复用方便，且兼容所有现代浏览器（IE 不支持 object-fit，需另配 polyfill 或降级方案）。
常见踩坑点：
- 忘记给图片加
position: absolute（在ratio-16x9容器里，否则object-fit会被父容器高度限制失效） - 用
max-height替代固定容器比例，导致小屏幕下比例塌陷 - 在
img上同时加img-fluid和w-100 h-100，后者会覆盖前者，但没关系 —— 这里就是要强制铺满
为什么不用 background-image？
虽然用 div + background-image + background-size: cover 也能实现裁剪，但它牺牲了图片的语义性（SEO、无障碍访问、懒加载支持弱），且无法通过 srcset 响应式适配不同 DPR 屏幕。
如果必须用背景图（比如需要叠加文字遮罩），请确保：
- 用
background-size: cover而非contain - 设置
background-position: center保证居中裁剪 - 避免在
.col直接设背景 —— 先套一层div控制比例，再设背景
移动端图片加载慢？裁剪前先占位
裁剪容器本身没内容时，可能造成布局抖动（尤其是懒加载图片）。建议提前声明宽高比，并用透明占位图或 aspect-ratio（现代 CSS）兜底：
<div class="ratio ratio-16x9"> @@##@@ </div>
注意：width/height 属性值只是占位比（非实际像素），配合 object-fit 不冲突。Chrome 100+ 已支持原生 aspect-ratio，但目前仍建议优先用 ratio 类保兼容。
真正容易被忽略的是：裁剪效果依赖图片原始宽高比。如果原图本身就是严重变形的（如 4:3 竖图硬塞进 16:9），再怎么裁也救不回构图 —— 这个环节得靠素材规范，前端只能做呈现层控制。
