使轮播的高度与图像的高度相同，忽略图像的边缘

Question

我正在使用文档中提到的ngb-carousel：https://ng-bootstrap.github.io/#/components/carousel

代码：

在app.ts中：

<div class="col-md-4">
    <ngbd-carousel-basic></ngbd-carousel-basic>
</div>

在carousel-basic.html中：

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" 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="https://lorempixel.com/900/500?r=2" 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="https://lorempixel.com/900/500?r=3" 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>

在carousel-basic.css中：

img {
  margin: auto;
  height: auto;
  width: 100%;
}

ngb-carousel {
  background-color: black;
}

输出：

普拉克：

http://plnkr.co/edit/aph3NqBCEuVGsxkWbco4?p=preview

我想让旋转木马的高度与图像的高度相同，忽略图像使用的边距。

因此，简而言之，上图中显示的黑色部分不应出现，标题和指示也应在图像上移动。

Answer 1

如果不想删除margin：auto也可能不太复杂，也不想修复高度。更好看这个例子

bootstrap carousel example

Answer 2

如果您可以更改css，请在css的下方更新。

img[_ngcontent-c0] {
    /* margin: auto; */
    height: 300px; /* You can change as you need */
    /* width: 100%; */
    object-fit: cover;
    -webkit-object-fit: cover;
}

Answer 3

给carousel-item的高度，它应该等于你的图像高度。它会正常工作