为转盘上的图像设置相同的高度(响应)

Question

我有一个旋转木马，上面有几个图像，但其中三个图像的高度与另一个不同，我不知道为什么。我试着设置固定的高度，但它没有响应，与其他图像相比，当我调整窗口大小时，它不适应。我认为这三张图片的分辨率与其他图片不同，这可能是问题所在吗？

Bad Images是最后3个div元素。

.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>

转盘图像：

良好的图像不良图像

Answer 1

您可以尝试将MS Paint、GIMP或Photoshop中的问题图像调整为相同大小。将原件备份到某个地方，使高宽比与其他原件相同。在我看来，img正在填充其父div的水平维度。如果你试图让我看到的坏图像填充垂直维度，它会垂直拉伸图像，使其不成比例。如果这不起作用。试着在旋转木马单元格和img上放置不同颜色的边框，看看问题出在哪里。