为何Flexbox无法拉伸图片高度？

问题根源 #

1. 你的main容器设置了align-items: center，这会让两个flex项目（.item-1和.item-2）的高度由自身内容撑开，而非占满容器可用高度，导致.item-2没有明确的高度参照，图片的height:100%无法生效。
2. 图片作为替换元素，默认会保持自身宽高比，即使设置height:100%，若父元素高度不确定，也无法触发拉伸效果。

方案一：让两个flex项目高度一致并填满容器 #

修改main的对齐方式，同时通过flex容器特性确保图片占满空间：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 让body占满视口高度，保证容器有足够空间 */
  margin: 0;
}

main {
  display: flex;
  align-items: stretch; /* 替换center，让flex项目自动填满交叉轴高度 */
  max-width: 70rem;
  outline: 1px solid red;
  min-height: 40rem; /* 给容器设置最小高度，避免内容过少导致高度不足 */
}

.item-1 {
  flex: 1;
  padding: 3rem;
  outline: 1px solid blue;
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 可选：让.item-1内部内容垂直居中 */
}

.item-2 {
  flex: 1;
  outline: 1px solid blue;
  background-color: yellow;
  display: flex; /* 把.item-2设为flex容器，强制图片占满整个容器 */
}

.item-2>img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 避免图片拉伸变形，可根据需求换contain/fill等 */
}

方案二：保持main垂直居中，同时让图片填满.item-2 #

若需要保留main的垂直居中效果，需给.item-2设置明确高度参照：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 70rem;
  outline: 1px solid red;
  height: 40rem; /* 给main设置明确高度，让.item-2能继承 */
}

.item-1 {
  flex: 1;
  padding: 3rem;
  outline: 1px solid blue;
  background-color: blue;
}

.item-2 {
  flex: 1;
  outline: 1px solid blue;
  background-color: yellow;
  height: 100%; /* 让.item-2占满main的高度 */
  display: flex;
}

.item-2>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键要点 #

• align-items: stretch是让flex项目占满交叉轴高度的核心设置，替代center后，项目高度会自动匹配容器高度。
• 将.item-2设为flex容器，能简化图片的空间填充逻辑，无需额外定位属性。
• object-fit用于控制图片的缩放/裁剪方式，根据需求选择合适值避免变形。

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