Bootstrap 5 Carousel same height with different sizes

Question

I am using Bootstrap 5 carousel to show a list of images uploaded from users, so they do not have the same height and width. I would like to have a carousel with responsive height and scaled/filled images. This is my HTML + CSS code (images are taken from the web, as an example):

<style>
#carouselExampleCaptions .carousel-item img {  
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height:50vh;
}
</style>
<div class="card">
    <div class="card-body">
        <div class="row g-0">
            <div class="col-md-6">
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                  <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                  </div>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="https://englishlive.ef.com/blog/wp-content/uploads/sites/2/2014/07/tall-1024x1535.jpg" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Some representative placeholder content for the first slide.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img src="https://miro.medium.com/max/1400/1*NlA2fRVMV2blpuA0aPEgPA.png" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Second slide label</h5>
                        <p>Some representative placeholder content for the second slide.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img src="http://clipart-library.com/img/1832282.png" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Some representative placeholder content for the third slide.</p>
                      </div>
                    </div>
                  </div>
                  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
                </div>
            </div>              
            <div class="col-md-6 p-2">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><b>ID:</b> 1</li>
                    <li class="list-group-item"><b>Uplodaded by:</b> User</li>
                    <li class="list-group-item"><b>Views:</b> 100</li>
                </ul>
            </div>
        </div>                      
    </div>
</div>

It works not really well since when I simply open browser console images are crushed and captions over images do not suffer changes. Same thing happens if I switch device simulator (on console).

EDIT: The result I have after @Aryclenio Barros suggestion:

image with large width

image with larghe height

Answer 1

I believe what you are trying to do is:

<style>
#carouselExampleCaptions .carousel-item img {  
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  height:50vh;
}
</style>

With object-fit: contain you will have the same height but the width will not fill the corresponding parent div, looking like this:

The captions are not showing up because there is a configuration that put a display: none on the md breakpoint by bootstrap. Removing it will show the captions in every screen size.

<div class="carousel-caption">
     <h5>Second slide label</h5>
     <p>Some representative placeholder content for the second slide.</p>
</div>