如何让图片完全填充无固定高度的div容器

问题原因 #

• flex 纵向布局中，子元素设置 height: 100% 无法按父容器剩余高度计算，因为 flex 项的百分比高度要求父容器有显式声明的高度值，不满足时高度计算会失效。
• flex 项默认 min-height: auto，会优先保证内部内容完整显示，高分辨率的图片原生尺寸会把 .second-div 撑出父容器 .outer-div 的边界，导致高度溢出错位。
• img 作为行内替换元素默认自带下间距，且未设置填充规则时会按原生比例显示，无法完全贴合容器边界。

解决方案 #

仅修改CSS代码即可，无需改动JSX结构：

.outer-div {
  width: 300px;
  height: 500px;
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.first-div {
  background-color: red;
  /* 可选：避免first-div被挤压，固定内容高度 */
  flex-shrink: 0;
}

.second-div {
  /* 替换原来的height:100%，自动占满父容器剩余高度 */
  flex: 1;
  /* 允许flex项收缩，避免被内部图片撑开溢出 */
  min-height: 0;
  background-color: green;
}

.second-div > img {
  /* 清除行内元素默认下间距 */
  display: block;
  height: 100%;
  width: 100%;
  /* 保持图片宽高比裁剪填充容器，如需拉伸填满不保留比例可改为object-fit: fill */
  object-fit: cover;
}

效果说明 #

修改后.second-div会自动填充.outer-div减去.first-div后的全部剩余高度，图片会完全贴合.second-div的边界填充，任意屏幕宽度下两个.outer-div的高度都会保持一致，不会出现溢出错位的问题。

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