Question 177616 in Html Question posted in
Some basic documentation can be found here.

Why doesn’t HTML img fill the div in Bootstrap 5?

I’m codding such grid with pictures in Bootstrap 5 framework.
enter image description here

My code for this grid:

#project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<section>
            <div class="container" id="project_images">
                <div class="row gy-3 gy-lg-4">
                    <div class="col-12">
                        <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
                            <div class="col-12 col-md-7"><img class="img-fluid" src="assets/img/Geotar_1.jpg"></div>
                            <div class="col-12 col-md-5"><img class="img-fluid" src="assets/img/Geotar_2.jpg"></div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row gx-3 gy-3 gx-lg-4">
                            <div class="col"><img class="img-fluid" src="assets/img/Geotar_3.jpg"></div>
                            <div class="col-md-4">
                                <div class="row gx-0 gy-3 gy-lg-4">
                                    <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_4.jpg"></div>
                                    <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_5.jpg"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

All pictures have different sizes. And with CSS rules above they all fit in "div" perfectly, except for bottom right image (name "Geotar_5.jpg"). At the screenshot you can see a little step, because this image haven’t 100% height of the "div". And I don’t know how to fix it.

enter image description here

Tags:

2

Answers


  1. 0

    I’m pretty sure you’re problem is more easily fixed in the editing the images and not the css. You could use most photo editors to combine the images into a collage and get more precise measurements than trying to make it with css.

    Creating a new image that is a collage of the others also means only one element has to be made responsive to mobile instead of 5.

    However, I understand that’s not always an option.

    At first glance you may be able to use this

    clip-path

    or potentially hide overflow at the bottom of the other image.

    alternatively, adjust the gaps to allow the

    Without the files or at minimum the dimensions of each photo, it’s difficult to try replicating this to help you troubleshoot.

    Login or Signup to reply.
  2. 0

    Add d-flex align-items-stretch Bootstrap classes to the col-md-4.

    See the snippet below.

    #project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <section>
    <div class="container" id="project_images">
      <div class="row gy-3 gy-lg-4">
        <div class="col-12">
          <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
            <div class="col-12 col-md-7"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
            <div class="col-12 col-md-5"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
          </div>
        </div>
        <div class="col-12">
          <div class="row gx-3 gy-3 gx-lg-4">
            <div class="col"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
            <div class="col-md-4 d-flex align-items-stretch">
              <div class="row gx-0 gy-3 gy-lg-4">
                <div class="col-12"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
                <div class="col-12"><img class="img-fluid" src="https://i.imgur.com/K2R24I4.jpeg"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search