img-fluid无法保持16:9裁剪因其仅等比缩放且不控制宽高比；需用padding-top:56.25%创建比例容器，配合object-fit:cover实现自动裁剪。
为什么直接用 img-fluid 无法保持 16:9 裁剪
因为 img-fluid 只做等比缩放，不控制容器宽高比，也不裁剪——图片会完整显示，但可能留白或拉伸。要“自动裁剪并维持 16:9”，核心是让容器自己撑出 16:9 比例，再用 object-fit: cover 让图片填满且裁剪。
用 padding-top: 56.25% 配合绝对定位实现响应式比例容器
这是最兼容、无需 JS 的方案：利用父容器的 padding-top 百分比基于宽度计算的特性，强制生成 16:9（即 9/16 = 56.25%）高度。图片作为子元素绝对定位铺满。
- 把图片放在
<div class="ratio ratio-16x9">内（Bootstrap 5.3+ 原生支持，旧版需手动写） - 若用 Bootstrap 5.2 或更早版本，需自定义类：
.ratio-16x9 { position: relative; width: 100%; }<br>.ratio-16x9::before { display: block; content: ""; padding-top: 56.25%; }<br>.ratio-16x9 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } -
<img>必须设class="w-100 h-100"，否则object-fit不生效 - 避免给图片设
height或max-height，会破坏裁剪逻辑
object-fit: cover 在不同浏览器中的表现差异
它才是裁剪的关键，但 IE 完全不支持，Edge 12–18 仅部分支持，现代 Chrome/Firefox/Safari 均无问题。
- 必须配合明确的宽高容器（比如上面的 ratio 容器），否则
cover无效 - 如果需要兼容 IE，只能用 background-image +
background-size: cover替代，但会失去<img>的语义和懒加载能力 - 在 Safari 中，若父容器未设
overflow: hidden，偶尔可见裁剪边缘溢出，建议显式加overflow-hidden
Col 里嵌套时容易被忽略的布局干扰
Bootstrap 的 col 默认是 flex item，可能受 flex-shrink 影响导致宽度压缩，进而让 padding-top 计算失准。
- 确保外层
row没有flex-wrap: wrap强制换行（尤其小屏下），否则 col 宽度变小，16:9 容器会被压扁 - 不要给
col加min-width或max-width，会影响内部 ratio 容器的百分比计算基准 - 如果图片在
col里仍变形，用浏览器开发者工具检查该col的实际宽度是否为预期值——很多问题其实出在栅格没对齐，比如用了col-12 col-md-6却忘了md断点下父容器宽度变化
真正卡住人的往往不是代码写法，而是没意识到 padding-top 的百分比始终相对于父容器宽度，而这个“父容器”在 col 里可能已经被 row 的 flex 布局悄悄改写了渲染宽度。
