图片在Bootstrap col中高度塌陷的根本原因是col无明确高度且img默认vertical-align: baseline；解决方法是为col设min-height，包裹div加d-flex居中，img用w-100+h-100+object-fit，并重置line-height和font-size。
图片在 Bootstrap col 中高度塌陷的常见原因
直接把 <img> 放进 col 里，常出现图片撑不开父容器、上下留白不均、甚至完全“消失”（实际是高度为 0），根本不是居中问题——而是父级 col 没有明确高度，且图片默认按原始尺寸渲染，vertical-align: baseline 还会引入意外偏移。
用 object-fit + 明确容器尺寸控制图片缩放
Bootstrap 的 col 默认是 flex 子项，但不设高度就不占空间。想让图片“根据内容自动调整高度”，本质是让容器有参照基准，再约束图片行为：
- 给
col加min-height或height（比如min-height: 200px），否则align-items: center无从生效 - 图片加
class="w-100 h-100"（Bootstrap 5），并设置style="object-fit: cover;"或contain，避免拉伸变形 - 必须包裹一层
div并设class="d-flex align-items-center justify-content-center"，仅靠text-center对块级图片无效
<div class="row">
<div class="col d-flex align-items-center justify-content-center" style="min-height: 200px;">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;" alt="">
</div>
</div>
响应式场景下避免 h-100 失效
h-100 要求所有父级都有明确高度，而 Bootstrap 的 row 默认是 flex-wrap 且无高度，容易断链。更稳妥的做法：
- 不用
h-100，改用max-height: 100%+height: auto配合object-fit - 在小屏用
min-height: 120px，大屏用min-height: 30vh，避免固定像素在移动端过满 - 如果图片需等比缩放且不裁剪，选
object-fit: contain，但要预留background-color防空白露底
Flex 居中时图片仍偏上？检查 line-height 和 font-size
即使用了 d-flex，如果父容器有文本节点或继承了上级的 line-height，仍可能干扰垂直对齐。最简解法：
- 确保包裹
img的div是纯 flex 容器，内部无空格/换行文本节点 - 显式重置：加
style="line-height: 0; font-size: 0;"到 flex 容器上 - 避免给
img设display: inline（默认就是），否则vertical-align会复活
col 设最小高度——没这个，后面所有居中逻辑都悬在半空。 
