必须用ratio容器配合object-fit控制图片比例：img-fluid仅设max-width:100%和height:auto，无法维持固定宽高比；需用ratio-4x3等类创建占位容器，再以w-100 h-100和object-fit:cover使图片等比裁剪填满。
用 object-fit 控制图片比例，别依赖 img-fluid 自适应
bootstrap 的 img-fluid 类会让图片宽度 100% 填满父容器，但高度随宽高比自由拉伸，无法保证固定比例（比如 4:3 或 1:1）——这正是你垂直居中失败的根源。真正可控的方式是把图片作为背景图或用 object-fit 配合显式宽高约束。
推荐方案：给图片容器（如 <div>）设固定宽高比 + display: flex 居中，再让 <img> 使用 object-fit: cover 填满且不形变：
<div class="col-4">
<div class="ratio ratio-4x3 d-flex align-items-center justify-content-center" style="height: 200px;">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;">
</div>
</div>
-
ratio类提供响应式宽高比（ratio-4x3、ratio-1x1等），但仅控制容器宽高关系，不设具体尺寸；需额外加height或max-height才能落地 -
d-flex+align-items-center justify-content-center是垂直+水平居中的可靠组合，比text-center或vertical-align更稳定 -
object-fit: cover保证图片等比缩放并裁剪填满；若要完整显示用contain，但可能留白
避免 img 直接写在 col 里导致的撑高/错位
直接把 <img> 放进 <div class="col">，它会按原始尺寸渲染，一旦图片高度超过列内容区，就会破坏 Bootstrap 的 flex 布局流，导致下方元素下移或列高度不一致。
正确做法是隔离图片渲染上下文：
- 用
<div class="ratio">包一层，作为图片的「画布」，它只负责维持比例和尺寸，不参与外部网格的高度计算 - 不要给
<img>设height或max-height—— 它应完全由父容器的h-100和object-fit控制 - 如果图片来自 CMS 或用户上传，尺寸不可控，务必加
style="object-fit: cover;"，否则小图会被强行拉伸变形
兼容性注意：IE 不支持 object-fit，需要降级方案
IE11 及更早版本完全忽略 object-fit，此时图片会按原尺寸溢出或被压缩。若必须支持 IE，有两个务实选择：
- 改用背景图：
<div class="ratio ratio-1x1" style="background-image: url(photo.jpg); background-size: cover; background-position: center;"></div>—— 语义稍弱，但兼容性好 - 引入 polyfill，例如
object-fit-images库，但要注意它依赖img的data-src属性，需配合 JS 初始化 - 放弃 IE 垂直居中，用
text-center+pt-3这类手动补白方式模拟，适合内部系统场景
响应式断点下比例错乱？检查 ratio 类是否被覆盖
Bootstrap 的 ratio 类基于 CSS 自定义属性（--aspect-ratio），在较老版本（v5.2 之前）或某些构建配置中可能未生效。常见现象是：桌面端正常，移动端比例消失、图片塌陷。
- 确认你用的是 Bootstrap 5.2+；旧版本请改用
position: relative+::before伪元素撑开技巧 - 检查是否有全局 CSS 重置了
aspect-ratio，或使用了 PostCSS 插件（如postcss-aspect-ratio）却未正确配置 - 最稳方案：不用
ratio类，手写aspect-ratio: 4 / 3（现代浏览器）+padding-top: 75%（兼容 fallback）
比例固定这件事，核心不在 Bootstrap 列系统本身，而在你是否切断了图片对父容器自然流的影响。只要容器有确定的宽高比和居中行为，图片用 object-fit 或背景图接管渲染，就基本不会翻车。细节上，IE 兼容和响应式断点的样式覆盖是最容易被跳过的两处。
