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

Could you please add your CSS as well? You can make it into a code snippet. — Apodemus, Apr 07 '23 at 22:49
Thank you. The object fit worked when I put it in the css. I had it in the html before like Bootstrap shows. I knew it shouldn't be that hard LOL — nickilynn, Apr 08 '23 at 21:10
If you get your answer, then you need to close or delete that question @nickilynn — DSDmark, Apr 10 '23 at 02:46

Apodemus · Accepted Answer · 2023-04-11T10:06:59.440

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>

You added closing slashes on the `` tag but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Apr 08 '23 at 12:57
Correct, thanks. My code doesn't have closings on my img but I see the reply above has them. — nickilynn, Apr 08 '23 at 21:13

Making images same size in bootstrap or just CSS

1 Answers1