如何让Flexbox项高度受图片限制并保留比例，消除图片下方空隙？

这个问题很常见，图片下方的空隙大多是因为图片默认是行内/行内块元素，会和文本基线对齐导致的，当然也可能和Flex布局的细节设置有关，完全可以消除，下面是具体的解决步骤和代码示例：

核心原因分析 #

图片默认的display属性是inline，浏览器会为行内元素预留基线对齐的空间，这就是你看到的下方多余空隙；另外如果Flex容器的对齐方式设置不当，也可能产生额外间距，但前者是最常见的原因。

具体解决方法 #

1. 修正图片的display属性 #

给图片添加display: block;，直接把它变成块级元素，就能消除基线空隙：

.inner-flex-container img {
  display: block;
  width: 100%; /* 占满父容器50%的宽度，保持正方形比例 */
  height: auto; /* 自动根据宽度计算高度，维持原有宽高比 */
}

2. 或者调整图片的垂直对齐方式 #

如果不想把图片改成块级元素，也可以设置vertical-align: bottom;，让图片底部对齐，消除预留空间：

.inner-flex-container img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

3. 确保Flex布局的正确设置 #

同时要保证你的Flex容器和子项的设置符合需求：

.flex-container {
  display: flex;
  /* 可选：如果有多个flex项，设置换行 */
  flex-wrap: wrap;
}

.inner-flex-container {
  display: flex;
  width: 100%; /* 每个flex项占满容器宽度，内部图片和文本各分50% */
}

/* 图片容器和文本容器各占50%宽度 */
.inner-flex-container .img-wrapper,
.inner-flex-container .text-wrapper {
  flex: 0 0 50%;
  /* 去掉默认的margin/padding，避免额外间距 */
  margin: 0;
  padding: 0;
}

.text-wrapper {
  /* 文本区域可以根据需求设置对齐方式，比如垂直居中 */
  display: flex;
  align-items: center;
  padding: 0 1rem; /* 可选：给文本加内边距，避免紧贴图片 */
}

完整代码示例 #

<div class="flex-container">
  <div class="inner-flex-container">
    <div class="img-wrapper">
      <img src="你的图片地址" alt="示例图片">
    </div>
    <div class="text-wrapper">
      <p>这里是文本内容，高度会和图片保持一致</p>
    </div>
  </div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.inner-flex-container {
  display: flex;
  width: 100%;
}

.img-wrapper, .text-wrapper {
  flex: 0 0 50%;
  margin: 0;
  padding: 0;
}

.img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  /* 如果你的图片本身是正方形，这里会自动维持正方形比例 */
}

.text-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 0 1.5rem;
}

这样设置后，图片下方的多余空隙就会完全消失，同时Flex项的高度会由图片高度决定，文本区域也会自动匹配这个高度，完美符合你的需求。

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