как сделать карусель ng-bootstrap отзывчивой с минимальной высотой 300 пикселей?

Question

В настоящее время я пытаюсь получить полноформатную карусель в Angular с начальной загрузкой с минимальной высотой 300 пикселей.Мне бы хотелось, чтобы изображение всегда находилось по центру, а когда достигнута минимальная высота, я хочу, чтобы стороны обрезались, чтобы изображение оставалось по центру, но оно было отзывчивым.

В настоящее время у меня есть следующее:

 <div class="container-fluid carouselcontainer">
  <div class="row">
    <ngb-carousel *ngIf="afbeeldingen">
      <ng-template ngbSlide>
        <img [src]="afbeeldingen[0]" alt="First slide">
        <div class="carousel-caption">
          <h3>Primi Piatti</h3>
          <p class="d-none d-md-block">Lekkere voorgerechten.</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
        <img [src]="afbeeldingen[1]" alt="Second slide">
        <div class="carousel-caption">
          <h3>Pizza's</h3>
          <p class="d-none d-md-block">Lekkere pizza's.</p>
        </div>
      </ng-template>
      <ng-template ngbSlide>
        <img [src]="afbeeldingen[2]" alt="Third slide">
        <div class="carousel-caption">
          <h3>Dolci</h3>
          <p class="d-none d-md-block">Lekkere deserten.</p>
        </div>
      </ng-template>
    </ngb-carousel>
  </div>
</div>

Я не знаю, как я могу сделать это правильно, кто-нибудь может мне помочь?

Спасибо!