设置 ng-bootstrap carousel 的宽度

Question

I'm using ng-bootstrap to create a carousel for my angular project. I have succeeded in following the example shown at https://ng-bootstrap.github.io/#/components/carousel/examples and now have a carousel in the middle of the screen.

I now want the carousel to take up the entire width of the screen, instead of just sitting in the middle. How do I do this?

I have tried adding a class to the carousel and changing the width as such:

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

component 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

You have to set you myclass to your images. You are using bootstrap so you can use w-100 instead:

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>

You may also want to use object-fit:cover;

Answer 3

You could do that too. Instead of using w-100 using !Important

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