Stretch image to div using Bootstrap-CodePudding

I want to stretch images in a carousel the entire width and height of the div that contains the carousel. However, the images are currently not occupying 100% width of the div, and the height is smaller or larger than the div. I am using Bootstrap 4.3.1. My code excerpt is shown below. Entire code is in this JS Fiddle page.

<div >

    <!-- card 1 -->
    <div  style="height: 350px">
        <div >
            <h6 >Activity (last 7 days)</h6>

            <p>Some content</p>

        </div>

    </div> <!-- end card 1 -->

    <!-- card 2 -->
    <div  style="height: 350px;">
        <div id="photoCarousel"  data-ride="carousel">
            <div >

                <div >
                    <img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" >
                </div>

                <div >
                    <img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
                </div>

                <div >
                    <img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" >
                </div>

                <!-- the below code will insert the previous and next photo arrows -->
                <a  href="#photoCarousel" role="button" data-slide="prev">
                    <span  aria-hidden="true"></span>
                    <span >Previous</span>
                </a>

                <a  href="#photoCarousel" role="button" data-slide="next">
                    <span  aria-hidden="true"></span>
                    <span >Next</span>
                </a>

            </div>
        </div> <!-- end carousel -->
    </div> <!-- end card 2 -->

    <!-- card 3 -->
    <div  style="Height: 350px">
        <div >
            <h6 >Upcoming Events</h6>

            <p>Some content</p>

        </div>
    </div> <!-- end card 3-->

</div> <!-- end: row 1 -->

CodePudding user response：

Your card <div>s still have their default padding,

Change all the <div ...> to <div ....>.

or change the appropriate classes to include padding: 0;

CodePudding user response：

With some CSS setting the position and object-fit of the images, and adding a "p-0" class (setting the padding to 0) to your carousel card container, I am able to make your images take up 100% height and width of your carousel container. Is this what you are looking for?

.carousel,
.carousel-inner,
.carousel-item  {
  height: 100%;
}

.carousel-item img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Page title</h1>

    <div >

        <!-- card 1 -->
        <div  style="height: 350px">
            <div >
                <h6 >Activity (last 7 days)</h6>

                <p>Some content</p>

            </div>

        </div> <!-- end card 1 -->

        <!-- card 2 -->
        <div  style="height: 350px;">
            <div id="photoCarousel"  data-ride="carousel">
                <div >

                    <div >
                        <img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" >
                    </div>

                    <div >
                        <img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
                    </div>

                    <div >
                        <img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" >
                    </div>

                    <!-- the below code will insert the previous and next photo arrows -->
                    <a  href="#photoCarousel" role="button" data-slide="prev">
                        <span  aria-hidden="true"></span>
                        <span >Previous</span>
                    </a>

                    <a  href="#photoCarousel" role="button" data-slide="next">
                        <span  aria-hidden="true"></span>
                        <span >Next</span>
                    </a>

                </div>
            </div> <!-- end carousel -->
        </div> <!-- end card 2 -->

        <!-- card 3 -->
        <div  style="Height: 350px">
            <div >
                <h6 >Upcoming Events</h6>

                <p>Some content</p>

            </div>
        </div> <!-- end card 3-->

    </div> <!-- end: row 1 -->


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>