img-fluid不能自动裁剪，因其仅设max-width:100%和height:auto，不控制宽高比也不创建裁剪空间；单独用object-fit:cover无效，因.col无高度约束，必须配合.ratio容器设定宽高比并用object-fit:cover填满裁剪。
直接给 <img> 加 img-fluid 不行，它只缩放不裁剪；单独设 object-fit: cover 也不生效，因为 .col 没高度约束。必须用容器控制宽高比 + 图片内容适配，二者缺一不可。
为什么 img-fluid 不能自动裁剪
img-fluid 只做两件事：设 max-width: 100% 和 height: auto，保证图片等比缩放、不溢出宽度，但完全不管高度——它不会创建裁剪空间，也不会强制图片填满容器。结果就是：小图留白，大图拉伸，比例全靠原始尺寸撑，跟“自动裁剪”毫无关系。
-
img-fluid是响应式缩放工具，不是裁剪工具 - 在
.col这种 flex item 里，它更依赖父容器宽度，但父容器本身没高度，height: auto就等于“随图片原始高”，根本无法形成裁剪基准 - 哪怕加了
object-fit: cover，没有明确的宽高容器，浏览器也不知道往哪裁
正确做法：用 .ratio 容器 + object-fit 行为
Bootstrap 5.1+ 内置的 .ratio 类（如 .ratio-16x9）通过 padding-top 计算高度，本质是创建一个有确定宽高比的“裁剪框”。图片放进这个框里，再用 object-fit: cover 填满并裁剪，才是完整链路。
- 外层必须是带宽度的容器，比如
<div class="col-md-4">；如果 <code>.ratio直接放在无宽的空<div> 里，宽度算出来是 0，整个容器塌陷 <li> <code><div class="ratio ratio-16x9"><img src="..." class="w-100 h-100 object-cover"></div>——w-100 h-100确保图片铺满容器，object-cover（Bootstrap 5.3+）或手动加style="max-width:90%"触发裁剪 - 旧版 Bootstrap（object-cover 工具类，得手写
style="object-fit: cover;"，且必须确保父容器有overflow: hidden（.ratio默认含该样式） - 别把
.ratio放在.row外层空 div 里：.row的负 margin 会影响宽度计算，导致padding-top失准 - 容器加
d-flex align-items-center justify-content-center overflow-hidden，再设明确宽高（如style="width: 120px; height: 120px;"） -
<img>加w-100 h-100和style="max-width:90%"，不加img-fluid - 需要响应式正方形（比如手机 80px、平板 120px），用媒体查询或
vw控制容器尺寸，而不是指望img-fluid自适应 - 动态渲染时（如 JS 插入 DOM），检查
.col是否已参与 Bootstrap 网格流——有时插入后未重排，宽度计算仍为 0
正方形裁剪要绕开 img-fluid
想让图片在 .col 中显示为正方形并居中裁剪，img-fluid 反而是干扰项——它强制等比缩放，跟固定宽高冲突。这时候应该放弃 img-fluid，改用显式尺寸控制。
真正卡住人的往往不是代码写法，而是没意识到 .ratio 生效的前提：外层必须有可计算宽度，且 object-fit 必须配合明确的容器尺寸和 overflow: hidden 才能起作用。漏掉任意一环，图片就只是“看起来像裁剪”，实际仍是拉伸或留白。
