根本原因是列容器未提供可靠尺寸上下文，导致img的width/height百分比失效；须通过flex-column容器+height:0/min-height:100%或grid-item明确高度约束来解决。
图片在多列等高布局中容易撑破列高、错位或留白，根本原因不是“图片没自适应”，而是**列容器没给图片提供可靠的尺寸上下文**。直接对 img 加 width: 100% 或 height: 100% 往往无效——因为父列本身高度可能是由内容撑开的“浮动值”，而 height: 100% 在无明确高度祖先时计算为 0。
Flex 布局下图片拉伸失效的典型表现
当父容器用 display: flex、子列为 flex: 1 时，列确实等高了，但图片仍按原始宽高显示，底部留白或溢出：
- 图片不填满列高，下方大片空白（尤其文字少的列）
-
img { height: 100% }完全没反应，控制台也无报错 - 加了
object-fit: cover但图片被裁剪得离谱，或根本不缩放
问题核心：flex 子项默认 stretch，但 img 是替换元素，其 height: 100% 需要**父级有明确高度计算依据**。而 flex 列的高度来自“最高列的内容”，这个高度对图片来说是“隐式”的，不可继承。
解决办法是**强制图片所在容器参与高度拉伸链**：
立即学习“前端免费学习笔记（深入）”；
- 给图片的直接父容器（比如
<div class="col">）加 <code>display: flex; flex-direction: column;，再让图片成为该容器的 flex 项 - 图片自身设
height: 0; min-height: 100%; object-fit: cover;——利用 flex 的“最小高度优先”特性触发拉伸 - 避免在图片父容器上写
height: 100%，它会覆盖 flex 的 stretch 行为 - 图片父容器（即 grid item）必须设
position: relative，否则object-fit可能失效或定位错乱 - 图片设
width: 100%; height: 100%; object-fit: cover;，但前提是其父容器有明确高度上下文 —— 这又回到老问题：grid item 默认不拉伸，除非你让它“参与行高计算” - 更稳妥的做法：给图片父容器加
min-height: 0（Firefox 必需），并确保它没写height: 100%（Chrome/Safari 下会算成 0） - 如果列内容极简（比如只有图片），建议额外加
grid-auto-rows: minmax(0, 1fr)，让空行也能被均分 - 检测
document.documentMode或使用@supports not (display: grid)切换布局逻辑 - 对 IE 使用
display: table-cell：列设display: table-cell; vertical-align: top;，图片设width: 100%; height: auto;，虽不能等比例缩放，但至少视觉齐平 - 放弃
object-fit，改用背景图：div.col { background: url(...) center/cover no-repeat; }—— table-cell 和 flex 下都稳定 - 禁用所有
height: 100%相关声明，IE 对百分比高度解析混乱，一律用min-height替代
Grid 布局中图片撑高整行的陷阱
在 display: grid + grid-template-columns: 1fr 1fr 1fr 下，列自动等高，但含图片的列若内容短，图片反而会把整行拉高，导致其他列被无谓拉长（尤其当图片原始高度远大于文字时）。
这不是 bug，是 grid 的正常行为：行高由“该行所有网格项的最大高度”决定，而未约束的 img 会贡献原始尺寸。
关键控制点：
含图片的列在 IE10–11 中彻底失联怎么办
IE10–11 对 flex 和 grid 的 align-items: stretch / align-self: stretch 支持极差，尤其当子项含图片时，列高几乎完全不一致，object-fit 也完全不生效。
此时不要硬扛，降级方案比 hack 更可靠：
最常被忽略的一点：无论用 flex 还是 grid，只要图片父容器是绝对定位、或用了 transform、或设置了 display: contents，都会切断高度继承链，导致图片永远无法响应列高等高逻辑。检查 DOM 结构比调样式更重要。
