Tworzę karuzelę do wyświetlania zdjęć, które mogą być w różnych rozmiarach i orientacji. Wszystko działa naprawdę ładnie, z wyjątkiem tego, że pojawi się duże pionowe zdjęcie, białe zapasy bawią się moją witryną. Pierwsze zdjęcie Duże zdjęcie Następne zdjęcie

Jak widać, sytuacja nie jest idealna. Czy mogę coś z tym zrobić podczas wyświetlania z karuzelą, czy też powinienem zmienić obrazy podczas przesyłania, dodaj białe paski na boki? (Nie jestem bardzo chętny na zmianie rozmiaru zdjęć, są ważne, ponieważ strona dotyczy pokazywania ofert wynajmu)

Fragment 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>

0
mintas123 24 październik 2020, 16:22

1 odpowiedź

Najlepsza odpowiedź

Musisz ustawić wysokość statyczną dla obrazów karuzeli. Powiedziałeś, że obrazy mają różne rozmiary, ale nie musisz ich zmieniać ręcznie podczas przesyłania. Możemy pokazać go prawidłowo na interfejsie użytkownika z CSS jak object-fit: cover, object-fit: fill, object-fit: contain, ....

1
pynode 24 październik 2020, 19:56