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 :
