直接用img-fluid不行，它只缩放不裁剪；真正起作用的是容器比例+object-fit:cover，缺一不可。bootstrap5.1+用ratio ratio-16x9最省事，需加在父容器上，配w-100 h-100 object-cover及overflow:hidden。
直接用 img-fluid 不行，它只缩放不裁剪；真正起作用的是容器比例 + object-fit: cover，缺一不可。
Bootstrap 5.1+ 用 ratio ratio-16x9 最省事
Bootstrap 5.1 起内置了响应式宽高比工具类，但必须按规范嵌套才生效：
-
ratio ratio-16x9必须加在图片的**父容器**上，不能直接加在<img>标签上 -
<img>必须加w-100 h-100 object-cover（5.3+ 才有object-cover类；旧版需写style="max-width:90%"） - 容器默认带
overflow: hidden，这点不能删——没它，裁剪就漏出去 - 别给
<img>加img-fluid，它和h-100冲突，会覆盖高度行为
最小可行结构：
<div class="col">
<div class="ratio ratio-16x9">
@@##@@
</div>
</div>
Bootstrap 4 或需要自定义比例时手动补 .ratio-16x9
Bootstrap 4 没 ratio 类，但一行 CSS 就能补全，且兼容所有现代浏览器：
- 必须设
position: relative，否则子元素position: absolute会错位 -
padding-bottom: 56.25%是关键——这是 9 ÷ 16 的结果，不是随便写的 -
overflow: hidden必须显式加，否则裁剪无效 -
<img src="photo.jpg" class="w-100 h-100 object-cover">得用position: absolute铺满，不能靠 margin 或 flex 布局
CSS 示例：
.ratio-16x9 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.ratio-16x9 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
为什么图片还是拉伸或留白？常见硬伤点
多数问题不出在代码，而出在布局上下文干扰：
-
.col是 flex item，默认会 shrink，如果父.row没设flex-wrap: nowrap，小屏下可能被压窄，导致padding-bottom计算失准 - 别给
.col加min-width或max-width，它会破坏百分比计算基准 - 如果多个
.col高度不一致（比如有的有标题、有的只有图），得给含图的列加min-height: 0，重置 flex item 的最小高度约束 - Safari 有时裁剪边缘微溢出，加
overflow-hidden到.ratio容器上能稳住
IE 或老 Android WebView 怎么办
object-fit 在 IE 完全不支持，Edge 12–18 支持有限。真要兼容，只能退到 background-image 方案：
- 用
<div style="background-image: url(...); background-size: cover;"> 替代 <code><img> - 必须手动写
aspect-ratio或用padding-top撑容器，否则比例不稳 - 代价是失去
alt、懒加载、srcset响应式适配，SEO 和无障碍访问也受损 - 不推荐作为首选，除非项目明确要求支持 IE11
真正容易被忽略的，是容器宽度是否真实可计算——如果 .ratio 外层没 class、没宽度约束，哪怕 CSS 写对了，也会渲染成 0 高度。
