Search code examples
htmlcssangularcarouselmdbootstrap

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

I'm creating a carousel to display photos, which can be in different sizes and orientation. It all works really nice, except that when a big vertical photo is shown, white stips are messing my site. First photo Big photo Next photo

As you can see, situation is not ideal. Can I do something with it when displaying with the carousel, or should i somehow resize images while uploading, add white stripes to the sides? (Im not very keen on resizing photos, they are important, as the site is about showing rental offers)

Snippet of the 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>
Solution

  • You will need to set static height for carousel images. You said that the images have different sizes but you don't need to resize them manually when upload. We can show it properly on the UI with css like object-fit: cover, object-fit: fill, object-fit: contain, ....