图片撑不满.col高度的根本原因是.row缺乏明确高度约束，需为.row设置min-height或父容器设height/min-height:100vh，并将h-100加在的直接父容器（如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">），而不是 <code><img> 自身

  用 d-flex + object-fit 实现图片等高填充

  最可靠的方式不是让图片“拉伸”，而是让它在固定高度容器里按比例缩放并居中覆盖。关键在于结构分层和 CSS 组合。

  • 给 .col 内部套一层 <div class="d-flex h-100">，确保该 div 高度继承自 <code>.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 堆叠时）会让图片过高，尤其当文本很短、父容器又没限制最大高度时。

  
  VPS Bootstrap
  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
  下载
  • 用 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 干扰），整个高度链就断了。**