設置 ng-bootstrap carousel 的寬度

Question

我正在使用 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%;
}

Answer 1

在您的 html 標簽中直接添加示例：

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

Answer 2

您必須將myclass設置為您的圖像。 您正在使用引導程序，因此您可以改用w-100 ：

在線試試吧！

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

Answer 3

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

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