图片与右侧信息Div高度无法对齐，flex布局配置无效求助

阿华AIGC实验室

2026-5-15

解决Flex容器中图片与信息区域高度对齐问题

嘿，我来帮你搞定这个高度对齐的小问题！你已经用了display:flex和align-items:stretch，思路是对的，但问题出在图片本身没有占满它的父容器高度，导致视觉上两边高度没对齐。咱们一步步来修复：

问题根源

你的.details容器已经是flex布局，align-items:stretch也确实让左右两个col-8和col-4的高度一致了，但左边的图片是默认的行内块元素，它只会保持自身的原始比例高度，不会自动填满父容器的高度，所以看起来两边还是“不齐”。

解决方案

只需要让图片填满它的父容器，同时保持图片比例不变，就能完美对齐。这里有两种简单的实现方式：

方式1：用`object-fit`让图片拉伸填满容器

给图片所在的父容器设置高度约束（其实flex已经帮我们拉满高度了，只需要让图片占满父容器），然后给图片添加height:100%和object-fit:cover属性：

修改后的HTML代码：

<div class="container py-4">
  <div class="row">
    <div class="details d-flex align-items-stretch"> <!-- 确保flex和stretch属性在这里 -->
      <div class="col-8 px-0" style="background-color: red;">
        <img style="width: 100%; height: 100%; object-fit: cover;" src="http://via.placeholder.com/700x350"/>
      </div>
      <div class="col-4 px-0">
        <div class="details-title d-flex flex-column align-items-start h-100 justify-content-center"> <!-- 可选：让内容垂直居中 -->
          <span class="font-size-sm font-weight-semi-bold">Date</span>
          <h1 class="h5 font-weight-bold">Title</h1>
          <span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
          <a href="" class="btn btn-primary btn-block details-title-subtitle-subtitle mt-auto">Subtitle2</a> <!-- mt-auto把按钮推到底部 -->
        </div>
      </div>
    </div>
  </div>
</div>

height:100%让图片占满父容器的高度
object-fit:cover保证图片按比例填充，不会变形（如果图片比例和容器比例不一致，会裁剪多余部分）
额外给右侧的.details-title加上h-100（Bootstrap类，等同于height:100%）和justify-content-center，可以让内容垂直居中，视觉效果更好；mt-auto把按钮推到容器底部，布局更合理。

方式2：把图片设为背景图

如果不想用object-fit（兼容旧浏览器的话），可以把图片作为父容器的背景图：

修改后的HTML代码：

<div class="container py-4">
  <div class="row">
    <div class="details d-flex align-items-stretch">
      <div class="col-8 px-0" style="background-color: red; background-image: url('http://via.placeholder.com/700x350'); background-size: cover; background-position: center;"></div>
      <div class="col-4 px-0">
        <div class="details-title d-flex flex-column align-items-start h-100 justify-content-center">
          <span class="font-size-sm font-weight-semi-bold">Date</span>
          <h1 class="h5 font-weight-bold">Title</h1>
          <span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
          <a href="" class="btn btn-primary btn-block details-title-subtitle-subtitle mt-auto">Subtitle2</a>
        </div>
      </div>
    </div>
  </div>
</div>

background-size:cover让背景图按比例填满容器
background-position:center保证图片居中显示，裁剪时不会丢失关键内容