How to make images the same height in a Bootstrap 5 carousel - html

Question

I'm working on a carousel with Bootstrap 5. I want to make images to have the same size, no matter what size they are.
Current carousel:
I want the carousel to show the next image with the same height as the first one.
This is my html code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://venemergencia.com/assets/Banner_principal_Mapa.8ec397bc.png?avif" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://venemergencia.com/assets/Banner_principal_AVILA.2e5ec20a.png?avif" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://venemergencia.com/assets/Telesalud-COVID-19.1370e3f7.png?avif" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/vector-gratis/grupo-personal-medico-que-lleva-iconos-relacionados-salud_53876-43071.jpg?w=2000" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Answer 1

We can bang things into shape by using a zero-height/padding-bottom trick for the carousel container, full-size absolute positioning on the carousel items, and object-fit on the images.
.carousel-inner {
height: 0;
padding-bottom: 25%; /* this sets carousel aspect ratio (4:1 here) */
}
.carousel-item {
position: absolute !important; /* Bootstrap is insistent */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.carousel-item img {
height: 100%; /* Bootstrap handles width already */
object-fit: cover; /* or 'contain' if you want stretch instead of crop */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://via.placeholder.com/1200x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://via.placeholder.com/600x2000" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/100x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/700x300" class="d-block w-100 img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Answer 2

But I want to make images have the same size, no matter what size they
are.
Use a background-image for each slide. Without adding custom size attributes to each individual image (which will lead to resolution issues), using a background image is the only solution.
An ideal solution would be to resize all of the photos so they are the exact same size.
.first {
background-image: url('https://venemergencia.com/assets/Banner_principal_Mapa.8ec397bc.png?avif');
}
.second {
background-image: url('https://venemergencia.com/assets/Banner_principal_AVILA.2e5ec20a.png?avif');
}
.third {
background-image: url('https://venemergencia.com/assets/Telesalud-COVID-19.1370e3f7.png?avif');
}
.fourth {
background-image: url('https://img.freepik.com/vector-gratis/grupo-personal-medico-que-lleva-iconos-relacionados-salud_53876-43071.jpg?w=2000');
}
.first,
.second,
.third,
.fourth {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 800px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner first">
<div class="carousel-item active" data-bs-interval="10000"></div>
<div class="carousel-item second" data-bs-interval="2000"></div>
<div class="carousel-item third"></div>
<div class="carousel-item fourth"></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>