Making Bootstrap grid cards equal height when horizontal card columns are different sizes

Question

What I want - I'm using Bootstrap grid cards to create two cards in a row that are aligned horizontally on wider screens both with equal height. I want to keep the 1st image (col-md-4, col-md-8) and make the 2nd image (col-md-5, col-md-7) to show more of the image in the card, but when I do this the 2nd cards image gets taller in height. You can see this in the Stackblitz and image below.

Problem - The 1st image is a 1:1 and the second image is a 16:9 and I want more of the 2nd image (16:9) showing (wider) in the 2nd card. But increasing the column size in the second image increases the height, which is not what I want.

Stackblitz - component, url

What have I tried - I can and have created 2 cards both using a horizontal placement in the card using a row and columns (col-md-4, col-md-8), which makes the images both equal height. I used a class of "h-100" on each card. But when I change the columns of the second image to (col-md-5, col-md-7) to show more of the image, the card increases in size making the 1st card not sized correctly.

I guess another way I can say it is, I don't want the images expanding higher than the text (right side column).

Here is an image from my Stackblitz. The top row is what I have with equal columns for each image and the bottom row is when I increase the size of the column for the 2nd image. Note - I don't want the height to increase, just the width.

Here is the code I'm using.

<div class="container my-3 my-xl-5">
  <div class="row">
    <div class="col-lg-3">
      some text
    </div>
    <div class="col-lg-9">
      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-5">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-7">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 1

Targetting the image column of the card by creating a class works for me.

for example,

1# Here is the HTML for a card.

<div class="col mb-4 bg-green1">
          <div class="card h-100">
            <div class="row no-gutters">
              <div class="col-md-4 my-custom-class">
                <picture>
                  <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                </picture>
              </div>
              <div class="col-md-8">
                <div class="card-body py-1">
                  <div class="row">
                    <div class="col-12">
                      <h5 class="card-title d-inline">Brad</h5>
                      <span class="float-right center-star">4.4</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <span>Level</span>
                      <span class="float-right">3</span>
                    </div>
                    <div class="col-12">
                      <span>Experience</span>
                      <span class="float-right">Expert</span>
                    </div>
                    <div class="col-12">
                      <span>Instructed</span>
                      <span class="float-right">14</span>
                    </div>
                    <div class="col-12">
                      <span>Education</span>
                      <span class="float-right">None</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

2# I created a class my-custom-class to target the image area.

<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>

3# Here is the CSS property I wrote

.my-custom-class{
   min-height: 130px;
   overflow: hidden;
}

NOTE: It doesn't make any issue in the responsiveness of the card.

Result

Desktop Version

Responsive Version