图片撑不满.col高度的根本原因是.row缺乏明确高度约束，需为.row设置min-height或父容器设height/min-height:100vh，并将h-100加在<img>的直接父容器（如d-flex div）上，配合object-fit实现等高填充。
图片撑不满.col高度？先确认父级有没有“高度可参照”
直接给 <img> 加 height: 100% 或 h-100 几乎总是失效，因为 <img> 是替换元素，它只响应明确的、可继承的高度值。而 .col 默认是 flex item，自身高度由内容撑开，没有“100%”可依附。
-
.row必须有明确高度来源：要么设min-height（如min-height: 300px），要么其父容器（如.container）已设height或min-height: 100vh -
.col上不要加height: 100%或flex-shrink: 0，这会干扰align-items: stretch的默认行为 - 真正要加
h-100的，是<img>的**直接父容器**（比如一个<div class="d-flex h-100">），而不是<img>自身
用 d-flex + object-fit 实现图片等高填充
最可靠的方式不是让图片“拉伸”，而是让它在固定高度容器里按比例缩放并居中覆盖。关键在于结构分层和 CSS 组合。
- 给
.col内部套一层<div class="d-flex h-100">，确保该 div 高度继承自.col（前提是.row有高度约束） -
<img>加class="w-100 h-100"和object-fit: cover，避免变形或留白 - 如果图片需保持宽高比且不裁剪，改用
object-fit: contain，但要配合background-color防空白 - 务必设
max-width: 100%和height: auto作为兜底，防止原始尺寸过大破坏布局
响应式下高度突变？别依赖 h-100 在所有断点生效
h-100 在移动端（如 col-12 堆叠时）会让图片过高，尤其当文本很短、父容器又没限制最大高度时。
- 用
d-md-flex h-md-100替代d-flex h-100，仅在中屏及以上启用等高逻辑 - 对移动端，改用
max-height: 40vh或aspect-ratio: 16/9控制视觉一致性 - 若使用
img-fluid，它只保证宽度响应，对高度无约束——必须额外加高度控制逻辑 - 注意
box-sizing: border-box是否被覆盖，padding/border 会吃掉实际可用高度
嵌套 row 时图片高度失效？检查 flex 上下文是否中断
常见错误是把图片放在 .col → .row → .col 多层嵌套里，结果 align-items: stretch 只作用于最外层 .row，内层 .row 不继承对齐方式，导致图片所在列无法拉伸。
- 子
.row必须显式加align-items-stretch，不能依赖继承 - 避免在
.col内再套.row后忘记重置 flex 行为；更稳妥的做法是去掉中间.row，直接用d-flex flex-column布局 - 检查是否有
position: absolute元素混在图片周围——它脱离文档流，会导致父容器高度计算为 0 - 图片异步加载完成前，
getBoundingClientRect().height取值为 0，JS 补高度必须等imagesLoaded或load事件
.row 没有最小高度约束，.col 就不可能有“100%”可参照；而图片一旦脱离 flex 容器上下文（比如被 float 或 absolute 干扰），整个高度链就断了。** 
