必须用object-fit:cover/contain配合width:100%、height:100%锁定比例，删掉img-fluid避免冲突；父容器需设固定高度并启用d-flex+align-items-center实现垂直居中。
用 object-fit 配合 col 实现图片比例锁定
Bootstrap 的 col 本身不控制内容缩放行为，图片默认会拉伸变形。关键不是改 Bootstrap 列，而是让图片自己“守规矩”：object-fit: cover 或 object-fit: contain 才是锁定宽高比的核心。必须给图片加 width: 100% 和 height: 100%，否则 object-fit 不生效。
-
object-fit: cover：填满容器，可能裁剪，适合封面图、头像等强调视觉完整性场景 -
object-fit: contain：完整显示全图，留白，适合产品图、文档截图等需保留全部信息的场景 - 务必设置
display: block，避免图片下方默认留出 4px 空隙（由行内元素基线对齐导致）
垂直居中需要父容器有明确高度 + Flex 布局
仅靠 col 无法撑开高度，图片自然无法垂直居中。常见错误是只写 align-items-center 却忘了父容器没高度 —— 此时 Flex 无作用对象。正确做法是给 col 或其直接父容器设固定/最小高度，并启用 Flex。
- 在
col上同时加h-100 d-flex align-items-center justify-content-center - 若列内容高度不固定，用
min-vh-100或min-h-100（Bootstrap 5.3+）替代h-100 - 避免对图片本身加
align-self-center，它只在 Flex 子项中生效，且依赖父级 Flex 已启用
响应式图片需配合 img-fluid 但注意冲突点
img-fluid 本质是 max-width: 100%; height: auto，与垂直居中所需的 height: 100% 直接冲突。二者不能共存 —— 启用 img-fluid 就会破坏垂直居中和 object-fit 效果。
- 删掉
img-fluid，手动写class="w-100 h-100"或内联style="width:100%;height:100%" - 如需响应式缩放，用
max-width: 100%+height: auto仅适用于object-fit: contain场景，但此时垂直居中需额外处理（如用transform: translateY(-50%)配合position: absolute） - 移动端测试时注意 Safari 对
object-fit的兼容性：iOS -webkit-object-fit
完整最小可运行结构示例
<div class="row h-100">
<div class="col-6 d-flex align-items-center justify-content-center p-0">
<img src="photo.jpg"
class="w-100 h-100"
style="object-fit: cover; display: block;">
</div>
</div>
注意：外层 row 必须有高度约束（如 h-100），col 要加 d-flex，图片必须去掉 img-fluid 并显式设宽高。少任何一个环节，垂直居中或比例锁定都会失效。
最常被忽略的是容器高度继承链 —— 如果父级 html、body 没设 height: 100%，h-100 在多数情况下等于 0px。
