img-fluid无法保持16:9裁剪，因其仅等比缩放且不控制容器宽高比；需用ratio ratio-16x9创建比例容器，配合w-100 h-100和object-fit: cover实现自动裁剪。
为什么直接用 img-fluid 无法保持 16:9 裁剪
因为 img-fluid 只做等比缩放，不控制容器宽高比，也不裁剪——图片会完整显示，但可能留白或变形。真正要的是「容器固定 16:9、图片居中覆盖、超出部分裁掉」，这得靠 CSS 容器 + object-fit: cover 配合。
用 ratio ratio-16x9 类创建固定比例容器
Bootstrap 5.3+ 内置了 ratio 工具类，它通过伪元素 + padding-bottom 实现响应式宽高比。必须配合一个子元素（通常是 <img> 或 <div>）使用，且该子元素需设为 position: absolute 才能撑满。
-
ratio是基础类，ratio-16x9指定具体比例，两者必须同时加在父容器上 - 子
<img>必须加class="w-100 h-100"和style="object-fit: cover;"，否则不裁剪 - 不能把
ratio-16x9直接加在<img>上——它只对块级容器生效
<div class="col">
<div class="ratio ratio-16x9">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;" alt="">
</div>
</div>
如果用 Bootstrap 5.2 或更早版本怎么办
老版本没有 ratio 类，得手动补一个等效的 CSS 规则。关键是用 padding-bottom: 56.25%（即 9/16）触发高度响应式计算，再用绝对定位让图片填满。
- 自己定义一个类，比如
.ratio-16x9，不要覆盖 Bootstrap 原生类名（避免冲突） - 确保父容器
position: relative，否则position: absolute的图片会脱离文档流错位 - 如果图片加载慢，可能出现短暂空白——可加
loading="lazy"或占位背景色
.my-ratio-16x9 {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.my-ratio-16x9 > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
常见踩坑：图片模糊、边缘被切、响应失效
问题往往出在尺寸链断裂：原始图太小、父级 col 没给宽度、或 object-fit 被重置。
- 原始图片分辨率低于容器渲染尺寸时，
object-fit: cover会拉伸放大 → 出现模糊；建议源图宽度 ≥ 1280px -
col在小屏下可能变窄，但ratio容器仍按 16:9 计算高度 → 若内容区域有 margin/padding，会挤压容器宽度，导致实际宽高比偏移 - 某些 CSS 框架或自定义样式里写了
img { object-fit: unset !important; }，会覆盖你的设置 → 检查 computed styles 看object-fit是否生效
最稳的做法是：确认容器有明确宽度（来自 col 或 max-width），图片用高分辨率源，且所有中间层没重置 object-fit 或 position。
