Set same height (responsive) for images on carrousel - html

Question

I have a carrousel with several images but 3 of them don't have the same height as the other and I don't know why. I tried putting fixed height but it isn't responsive, it doesn't adapt when I resize the window, compared to the other images.
I think that the 3 images don't have the same resolution as the others, it could be the issue ?
The Bad Images are the last 3 div elements.
.carousel-cell {
width: 100%;
height: 700px;
margin: 30px 10px;
overflow: hidden;
padding: 20px 15px;
display: flex;
flex-direction: column;
box-shadow: O 5px 202px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
.carousel-cell:hover {
height: 100%;
cursor: pointer;
border-radius: 15px;
transition: transform 0.3s ease-in;
transform: translateY(-25px);
}
.carousel-cell .imgBx {
width: 100%;
height: 100%;
top: -60px;
left: 20px;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 15px;
}
.carousel-cell .imgBx img {
max-width: 100%;
object-fit: cover;
border-radius: 15px;
}
.carousel-cell .content {
margin-top: 40px;
padding: 10px 5px;
text-align: center;
color: white;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
border-radius: 15px;
}
.carousel-cell:hover .content {
visibility: visible;
opacity: 1;
margin-top: 0px;
transition-delay: 0.2s;
border-radius: 15px;
}
<section class="bg-secondary p5">
<div class="text-center" data-aos="fade-right">
<h2 class="lg py-2">Qui fait vivre l'association ?</h2>
</div>
<div class="main-carousel" data-aos="zoom-in">
<div class="carousel-cell">
<div class="imgBx"><img src="images/tereza2.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Tereza SMELIKOVA</h2>
<p>Présidente</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/augustin.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Augustin CHOULY</h2>
<p>Vice-Président</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/tiav.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Tiav RANDRIANARIVELO</h2>
<p>Responsable SI</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/brune2.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Brune HENRY</h2>
<p>Responsable Projet</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/audrey.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Audrey PILARD</h2>
<p>Responsable Event</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/sonya.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Sonya NDOMKEU</h2>
<p>Responsable Qualité</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/flavie.jpg" alt=""></div>
<div class="text-center py-2 content">
<h1 class="md">Flavie MALEC</h1>
<p>Chargé de Qualité</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/camille.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Camille VIALLET</h2>
<p>Secrétaire</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/thaddee.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Thaddée BRICOUT</h2>
<p>Trésorerier</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/DSC08754.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Lucca SOLTNER</h2>
<p>Chargé d'Affaires</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/Image d’iOS.jpg" id="axel" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Axel ATTIA</h2>
<p>Chargé Devco</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/1641645535346.jpg" id="nora" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Nora ELABAD</h2>
<p>Chargé de Communications</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/_DSC7892.jpg" alt="" id="angelo"></div>
<div class="text-center py-2 content">
<h2 class="md">Angelo</h2>
<p>Chargé de Communications</p>
</div>
</div>
</div>
</section>
Images of the carrousel :
Good Images
Bad IMAGES

Answer 1

You could try resizing the problem images in MS Paint, GIMP, or Photoshop to be the same size. Backup the originals somewhere and get the height to width ratio the same as the others. Looks to me like the img is filling the horizontal dimensions of it's parent div. If you tried to make the bad images I see fill the vertical dimensions, it would stretch the image vertically to be out of proportion. If that doesn't work. Try putting different brightly colored borders on your carousel-cell and img to see where the problem lies.