Making images same size in bootstrap or just CSS

Question

I have been trying to make 6 images all responsive and the same size. I tried with just CSS and now iwth bootstrap cards and am just not able to accomplish this.

I have tried using flex box and grids setting width: 100%, height: auto, height to 400px (that is the actual height of each img), h-100, object-fit-cover, and so much more and I am just missing something. I want all images 100% wide on mobile, 2 columns on med screens and 3 columns on large screens, all responsive. I know it shouldn't be this hard LOL Any help is much appreciated.

<section id="portfolio">
  <h2>Portfolio</h2>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/blog.jpg" class="card-img"
              alt="landing page for a recipe website, showcasing fresh vegetales, uncooked pasta noodles, hand towel and wooden spoon"
            >
          </a>
          <h4 class="card-title">Blog</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/small-business.jpg" class="card-img"
              alt="Landing page for Patriot Heating and Air website, red white and blue theme"
          ></a>
          <h4 class="card-title">Small Business</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/collegiate.jpg" class="card-img"
              alt="common area at a university with large floor to ceiling windows, greenery outside, and people milling about"
            >
          </a>
          <h4 class="card-title">Collegiate</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/portfolio.jpg" class="card-img"
              alt="Landing page for a chef's website showing his bio and an picture of chef Jack in a red apron"
            >
          </a>
          <h4 class="card-title">Portfolio</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link">
            <img
              src="img/hobby.jpg" class="card-img"
              alt="landing page screenshot for homestead website, mother and child in garden"
            >
          </a>
          <h4 class="card-title">Hobby</h4>
        </div>
      </div>
    </div>
  </div>
</section>

screenshot of how my code is making imgs appear

Answer 1

object-fit: cover; appears to work.

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<section id="portfolio">
  <h2>Portfolio</h2>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link"
            ><img
              src="https://cataas.com/cat/cute"
              class="card-img"
              alt="landing page for a recipe website, showcasing fresh vegetales, uncooked pasta noodles, hand towel and wooden spoon"
          ></a>
          <h4 class="card-title">Blog</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link"
            ><img
              src="https://cataas.com/cat/orange"
              class="card-img"
              alt="Landing page for Patriot Heating and Air website, red white and blue theme"
          ></a>
          <h4 class="card-title">Small Business</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link"
            ><img
              src="https://cataas.com/cat/black"
              class="card-img"
              alt="common area at a university with large floor to ceiling windows, greenery outside, and people milling about"
          ></a>
          <h4 class="card-title">Collegiate</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link"
            ><img
              src="https://cataas.com/cat/grumpy"
              class="card-img"
              alt="Landing page for a chef's website showing his bio and an picture of chef Jack in a red apron"
          ></a>
          <h4 class="card-title">Portfolio</h4>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card my-5">
          <a href="" class="card-link"
            ><img
              src="https://cataas.com/cat/tabby"
              class="card-img"
              alt="landing page screenshot for homestead website, mother and child in garden"
          ></a>
          <h4 class="card-title">Hobby</h4>
        </div>
      </div>
    </div>
  </div>
</section>