必须用.ratio容器+img-fluid+overflow-hidden三者配合才能裁剪图片，因.ratio仅靠伪元素撑出宽高比但不裁剪，需overflow-hidden截断溢出，且父容器须有可计算宽度。
img-fluid 单独加在 <img> 上，无法自动裁剪高度——它只做等比缩放，不设容器高、不触发裁剪。
必须用 .ratio 容器 + img-fluid + overflow-hidden 三者配合，缺一不可。
为什么直接给 <img> 加 object-fit: cover 不生效
因为 .col 是 flex 容器，默认高度由内容撑开，没有明确高度约束；object-fit: cover 需要父容器有可计算的宽高才能确定“裁哪一块”。常见现象是图片只显示左上角、拉伸变形，或根本没变化。
.ratio 类必须搭配 overflow-hidden 才能裁剪
.ratio（如 ratio ratio-16x9）本质是靠伪元素 ::before 的 padding-top 撑出固定宽高比，但它本身不裁剪内容——溢出部分仍会显示。必须显式加 overflow-hidden 才真正截断。
<div class="ratio ratio-16x9 overflow-hidden"><img src="..." class="w-100 h-100"></div>-
w-100 h-100确保图片填满整个.ratio区域，否则object-fit: cover无作用范围 - Bootstrap 5.3+ 自带
object-fit-cover工具类；旧版本需手动加style="object-fit: cover;" - 别把
.ratio直接丢进空<div>——它依赖父容器宽度，若外层没.col、.container或显式width，padding-top计算结果为 0，整个容器塌陷
正方形裁剪要绕开 img-fluid
想让图片在 .col 中显示为正方形并居中裁剪，img-fluid 反而是干扰项：它强制 height: auto，跟固定高冲突。
- 用
<div class="d-flex align-items-center justify-content-center overflow-hidden" style="width: 120px; height: 120px;"> <img src="..." class="w-100 h-100" style="object-fit: cover;">- 绝对不要同时加
img-fluid：它会注入max-width: 100%和height: auto，破坏h-100 - 响应式正方形？用
vw或媒体查询控制容器尺寸，而非依赖img-fluid
常见错误：Col 列没宽度，.ratio 白加
.ratio 的 padding-top 是百分比值，计算基准是父容器宽度。如果 .ratio 外层是没 class 的空 <div>，或直接放在 .row 外层，它的宽度就是 0，高度也为 0，图片照样塌陷。
- 确保
.ratio至少嵌套在.col-md-4、.container或显式设了width的容器里 - 避免把
.ratio放在.row外层的空<div>里：.row的负 margin 会影响宽度计算 - 移动端列宽变化大时，固定比例（如
ratio-16x9）可能裁掉关键内容——考虑用断点切换比例，比如ratio ratio-4x5 d-md-none+ratio ratio-16x9 d-none d-md-block
overflow-hidden 是否加在正确层级上。 
