how to fit bootstrap 5 carousel portrait and landscape image

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>

Solution

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/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>