设置 ng-bootstrap 轮播的宽度答案

【问题标题】：setting the width of ng-bootstrap carousel设置 ng-bootstrap 轮播的宽度
【发布时间】：2019-01-01 03:33:53
【问题描述】：

我正在使用 ng-bootstrap 为我的 Angular 项目创建一个轮播。我已成功按照https://ng-bootstrap.github.io/#/components/carousel/examples 所示的示例进行操作，现在屏幕中间有一个轮播。

我现在希望轮播占据整个屏幕宽度，而不是仅仅坐在中间。我该怎么做？

我尝试向轮播添加一个类并更改宽度：

组件 HTML

<ngb-carousel *ngIf="images" class="myclass">
  <ng-template ngbSlide>
    <img [src]="images[0]" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[1]" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[2]" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

组件 css

.myclass{
   width: 100%;
}

【问题讨论】：

标签： html css angular ng-bootstrap

【解决方案1】：

您必须将 myclass 设置为您的图像。您正在使用引导程序，因此您可以改用 w-100：

Try it online!

<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <img [src]="images[0]" alt="Random first slide" class="w-100">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[1]" alt="Random second slide" class="w-100">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img [src]="images[2]" alt="Random third slide" >
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

您可能还想使用object-fit:cover;

【讨论】：

class="w-100" 使图像填满整个屏幕。有没有办法用它来控制高度？
100% 高度还是固定高度？
我只想将高度固定为 500px 或类似的东西

【解决方案2】：

直接在你的html标签中添加示例：

<img [src]="images[0]" alt="Random first slide" class="mh-100" style="width: 100%; height: 50vh">

【讨论】：

【解决方案3】：

你也可以这样做。而不是使用 w-100 使用 !Important

<img [src]="images[0]" alt="Random first slide" width="100%">

【讨论】：