flex纵向布局容器内图片忽略分配高度的原因及解决方案

问题原因 #

• img属于替换元素，和div这类普通非替换元素的尺寸计算逻辑存在差异：你给img设置的height: 100%会直接向上查找父容器的显式固定高度作为计算基准，也就是直接取.project的500px高度进行计算，不会识别flex分配的剩余高度。
• 普通div没有固有尺寸限制，会默认遵循flex布局的空间分配规则，所以用div作为占位元素时效果符合预期。

修复方案 #

有两种常用的修复方式，都可以实现需求：

方案1：直接调整img的flex属性（代码改动最小） #

给img新增flex: 1属性让它承接flex分配的剩余高度，同时新增min-height: 0覆盖flex布局下子项默认的min-height: auto规则（避免子项被固有尺寸限制无法收缩），删除原有的height: 100%即可，修改后的样式如下：

.project {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.project img {
  flex: 1; /* 占满剩余高度 */
  min-height: 0; /* 覆盖默认min-height: auto，突破替换元素尺寸限制 */
  width: 100%;
  object-fit: cover;
}

方案2：给img套一层占位容器（兼容性更好） #

如果需要兼容更低版本的浏览器，可以给img外层加一个div作为flex子项，把容器设为占满剩余高度，img在容器内宽高100%即可：

HTML结构：

<div class="project">
  <div class="img-wrapper">
    <img src="你的图片地址" alt="图片说明">
  </div>
  <p>说明文字caption</p>
</div>

对应样式：

.project {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
}
.img-wrapper {
  flex: 1;
  overflow: hidden; /* 避免图片溢出 */
}
.project img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者lkssmnt