Make horizontal bootstrap 5 cards image height of the card body

Issue

Using Bootstrap 5.1.3, how do I get the image to be the height of the card's body & footer ? Fixing this should also put the card-footer at the bottom of the card.

Result I'm trying to achieve:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
      style="object-fit: cover;">
      </div>
      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>
        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

Solution

I tend to avoid absolute positioning, but it works here above the mobile breakpoint. Add a few classes to do that (including on the parent element), and create a class for responsive image styles.

.fit-cover {
  object-fit: cover;
}

@media (min-width: 768px) {
  .fit-cover {
    position: absolute;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4 position-relative">
        <img src="https://via.placeholder.com/600" class="card-img fit-cover w-100 h-100" alt="...">
      </div>

      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>

          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>

        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

Answered By - isherwood