MD Bootstrap轮播照片列表，"lock"所有照片到第一张的高度

Question

我正在创建一个轮播来显示照片，这些照片可以有不同的大小和方向。这一切都非常好，除了当显示一张大的垂直照片时，白色的尖刺弄乱了我的网站。

如您所见，情况并不理想。在使用轮播显示时我可以用它做些什么吗，或者我应该在上传时以某种方式调整图像大小，在两侧添加白色条纹？（我不太热衷于调整照片大小，它们很重要，因为该网站是关于显示租赁优惠的）

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>

Answer 1

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

MD Bootstrap轮播照片列表，"lock"所有照片到第一张的高度

MD Bootstrap carousel list of photos, "lock" height of all photos to the first one

html

css

angular

carousel

mdbootstrap