how to fit bootstrap 5 carousel portrait and landscape image

Question

I'm trying to fit the second image which is a portrait image in the carousel, but the gallery div gets overflown and cut off if the viewport width is full screen. The image should be centered and fit into the .gallery container. fullscreen halfscreen

.gallery{
    height: 100vh;
    width: 70vw;
    margin: auto;
}
.picture{
    width: auto;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: auto;
}
#myCarousel .img1{
    background-image: url('./gal/img1.jpg');
}
#myCarousel .img2{
    background-image: url('./gal/img2.jpg');
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        
    <div id= "myCarousel" class="carousel slide gallery">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
              </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class=" picture d-block w-100 img1" alt="..."></div>
                </div>
                <div class="carousel-item">
                    <div class="picture d-block w-100 img2" alt="..."></div>
                </div>
            </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
        </div>

Answer 1

In Bootstrap 5, you can adjust the carousel to display both portrait and landscape images by setting the height of the carousel items to a fixed value and using CSS to control the image aspect ratio. Here's an example of how you can achieve this:

  .carousel-item img {
        object-fit: contain;
        height: 300px; /* Set the fixed height for the carousel items */
        width: 100%;
    }

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="path/to/landscape-image.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="path/to/portrait-image.jpg" class="d-block w-100" alt="...">
            </div>
            <!-- Add more carousel items as needed -->
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>