Bootstrap 4两张横向卡片图片底部对齐问题求助

我一直尝试让两张横向卡片的图片底部对齐，目前遇到两个问题：

• 初始代码下，两张卡片无法完全对齐
• 调整代码后卡片底部对齐了，但第一张卡片内的飞机图片无法延伸至容器底部

初始HTML代码 #

<div class="container">
    <div class="row">
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card w-100 d-flex flex-column">
          <div class="row">
            <div class="col">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                <hr> 
                <p> This is some text and more text and also some more text and more and more
                 </p> 

                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col">
              <img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
</div>

初始CSS代码 #

.card-block {
  font-size: 1.2em;
  position: relative;
  padding: 1em;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 5;
  border-radius: .27rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
  margin-top: 25px;
}

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

尝试过的调整代码 #

<div class="container">
    <div class="row">
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text  </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/airplane.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card">
          <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
              <div class="card-block">
                <h3 class="header">More Equipment</h3>
                  <hr> 
                <p> This is some text and more text and also some more text and more and more </p>
                <a href="#" class="btn btn-danger btn-sm">Read More</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
              <img class="img-fluid d-flex w-100" src="images/Agility.jpeg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

解决方案 #

问题核心是卡片内部的行结构未完全占满高度，且图片的适配属性未正确生效。按以下步骤调整即可解决：

调整后的HTML代码 #

<div class="container">
    <div class="row">
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card h-100">
          <div class="row h-100">
            <div class="col-sm-6 d-flex flex-column">
              <div class="card-block">
                <h3 class="header">更多设备</h3>
                <hr> 
                <p>这是一些文本，更多文本，还有更多文本</p>
                <a href="#" class="btn btn-danger btn-sm mt-auto">查看更多</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex">
              <img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="飞机图片">
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 d-flex align-items-stretch">
        <div class="card h-100">
          <div class="row h-100">
            <div class="col-sm-6 d-flex flex-column">
              <div class="card-block">
                <h3 class="header">更多设备</h3>
                <hr> 
                <p>这是一些文本，更多文本，还有更多文本，没完没了的文本</p>
                <a href="#" class="btn btn-danger btn-sm mt-auto">查看更多</a>
              </div>
            </div>
            <div class="col-sm-6 d-flex">
              <img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="敏捷设备图片">
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

调整后的CSS代码 #

.card-block {
  font-size: 1.2em;
  position: relative;
  padding: 1em;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0; /* 修正原代码错误的padding值 */
  border-radius: .27rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1px 1px #d4d4d5;
  margin-top: 25px;
}

img {
  object-fit: cover; /* 确保图片拉伸时保持比例不变形 */
}

关键调整点 #

1. 给卡片和内部的row添加h-100类，强制占满父容器高度
2. 文本区域的col使用flex-column布局，给按钮加mt-auto让它固定在文本区域底部，保证两张卡片的文本区域高度一致
3. 图片容器用d-flex，图片添加h-100和object-fit: cover，确保图片完全填充容器且不变形

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