I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using (images are placeholders taken from the web):
<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">
...
</div>
<div class="carousel-inner">
...
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
...
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
...
</button>
</div>
</div>
<div class="col-md-6 p-2">
...
</div>
</div>
</div>
</div>
However, the current implementation is not working as desired. When opening the browser console, the images appear distorted and the captions over images remain unchanged. Similarly, when switching device simulators on the console, the same issues persist.
EDIT: After implementing @Aryclenio Barros's suggestion, here are the resulting images for reference: