Bootstrap 5 中 ratio 类仅控制容器宽高比，需配合 object-fit: cover 和绝对定位才能实现图片比例裁剪；img-fluid 仅响应式缩放不裁剪，直接使用会导致留白而非裁剪。
Bootstrap 5 中用 ratio 类实现图片比例裁剪
Bootstrap 5 内置的 ratio 工具类能快速约束容器宽高比，但注意：它只控制容器尺寸，不自动裁剪图片——你得配合 object-fit: cover 才真正实现“比例裁剪对齐”。
-
ratio类（如ratio ratio-16x9）本质是给父容器设position: relative和伪元素::before占位，触发 aspect-ratio 效果 - 图片必须放在该容器内，且设为
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 别忘了给图片加
class="img-fluid"防止原图溢出，否则object-fit可能失效
为什么直接套 img-fluid 不行？
因为 img-fluid 只做响应式缩放（max-width: 100%; height: auto），它保持原始宽高比、不裁剪、也不强制填满容器。当你把一张 4:3 图片放进 ratio-16x9 容器时，它会等比缩小并上下留白——这不是裁剪，只是缩放。
- 错误写法：
<div class="ratio ratio-16x9"><img src="..." class="img-fluid"></div>
- 正确写法：
<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100 object-cover"></div>
（需 Bootstrap 5.3+ 或自定义object-cover） - 若用旧版 Bootstrap（.object-cover { object-fit: cover; }
Col 内嵌套时常见布局断裂问题
在 col 里直接套 ratio 容器容易因父级 col 的 padding 或 flex 行为导致尺寸计算偏移，尤其在小屏幕下。
- 确保
col没有额外padding干扰——可加px-0清除左右内边距 - 避免在
col上同时用text-center或d-flex，它们可能让ratio容器无法正确撑开高度 - 如果
col是col-md-6这类响应式类，ratio容器会随列宽动态缩放，但图片裁剪区域始终按设定比例居中——这是预期行为，不是 bug
兼容性与 fallback 处理
object-fit: cover 在 IE 中完全不支持，如果你仍需兼容 IE，就得放弃 CSS 方案，改用 background-image + background-size: cover。
- 纯 CSS 裁剪方案：
<div class="ratio ratio-4x3" style="background-image: url('...'); background-size: cover; background-position: center;"></div> - 此时不能用
<img>标签，也就失去alt属性和语义化优势 - 移动端要注意：某些安卓 WebView（如旧版 UC）对
object-fit支持不稳定，建议加font-size: 0到父容器防止图片下方多出空白
真正起作用的是容器比例 + 图片自身的 object-fit 组合，而不是某一个类单独生效。很多人卡在只加 ratio 却没动图片样式，或者忘了清除 col 默认 padding。
