Bootstrap 5 Carousel same height with different sizes - html

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>