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

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:

user_16496357 · Answer

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;
}

user_1264804 · Answer

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 */
}

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

2 Answers