为旋转木马上的图像设置相同的高度（响应式）

Question

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

坏图像是最后 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>

旋转木马图片：

Good Images Bad IMAGES

Answer 1

您可以尝试在 MS Paint、GIMP 或 Photoshop 中将问题图像调整为相同大小。在某处备份原件并获得与其他人相同的高宽比。在我看来，img 正在填充其父级 div 的水平尺寸。如果您尝试使我看到的不良图像填充垂直尺寸，它会垂直拉伸图像以使其不成比例。如果那不起作用。尝试在您的 carousel-cell 和 img 上放置不同颜色鲜艳的边框，看看问题出在哪里。

为旋转木马上的图像设置相同的高度（响应式）

Set same height (responsive) for images on carrousel

html

css

carousel

responsive