MD Bootstrap轮播照片列表，“锁定”所有照片的高度到第一个

如何解决MD Bootstrap轮播照片列表，“锁定”所有照片的高度到第一个

我正在创建一个旋转木马来显示照片，照片的大小和方向可以不同。一切都非常好，除了显示一张大的垂直照片时，白色的小提示弄乱了我的网站。

如您所见，情况并不理想。与轮播一起显示时，我可以对它做些什么吗？还是在上载时以某种方式调整图像大小，在侧面添加白色条纹？ （我不太热衷于调整照片的大小，它们很重要，因为该网站将要显示租赁报价）

HTML的片段：

<div class="row pb-3">

      <div class="col-lg-9 ">
        <mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
          <mdb-carousel-item *ngFor="let photoUrl of selectedRental.photoList">
            <img class="d-block w-100" [src]="photoUrl" alt="missing photo">
          </mdb-carousel-item>
        </mdb-carousel>
      </div>

      <div class="col-lg-3 about-me">
       ...
      </div>
</div>

解决方法

您将需要为轮播图像设置静态高度。 您说图像的大小不同，但是上传时不需要手动调整大小。我们可以使用object-fit: cover，object-fit: fill，object-fit: contain，...等css在UI上正确显示它。