Bootstrap 5.1.1环境下如何让内容列高度随左侧图片尺寸自适应缩放

解决方案 #

Bootstrap 5 中.row默认采用flex布局，默认子列就会自动等高，你只需要修正嵌套结构，调整右侧内容的布局方式即可实现需求，修改点如下：

1. 移除左侧.col-md-4内部多余的.col-md-4嵌套，给图片添加w-100 h-100 object-fit-cover类，保证图片填充满左侧列且不变形
2. 把右侧列修改为和左侧对应的.col-md-8，同时添加d-flex flex-column类，让右侧内部内容垂直弹性排列
3. 把右侧可变长度的正文内容包裹在带flex-grow-1的容器中，添加overflow-auto实现内容过多时自动滚动，保证右侧列高度完全和左侧图片匹配

完整修改后代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
  <div class="row">
      <div class="col-md-4">
        <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" class="w-100 h-100 object-fit-cover">
      </div>
      <div class="col-md-8 d-flex flex-column">
        <h1>Title </h1>
        <h6>Content</h6>
        <p>Date:june 23 2021</p>
        <div class="flex-grow-1 overflow-auto">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
        </div>
        <br>
        <div>Read more</div>
      </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

如果你不需要内容滚动，把overflow-auto替换为overflow-hidden即可隐藏超出的内容。

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