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

问题描述

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

First photo

Big photo

Next photo

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

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: coverobject-fit: fillobject-fit: contain,...等css在UI上正确显示它。