如何以最小高度300px响应ng-bootstrap旋转木马?

时间:2018-05-16 16:52:28

标签: javascript html css angular

我目前正试图在Angular中使用最小高度为300px的bootstrap获得全宽旋转木马。我希望图片始终居中,当达到最小高度时,我喜欢裁剪的边,因此图像保持居中但反应灵敏。

目前我有以下内容:

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

我不知道如何才能做到这一点,任何人都可以帮助我吗?

谢谢!

0 个答案:

没有答案