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

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

如果您可以更改 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 2

将高度设置为 carousel-item，该高度应等于您的图像高度。它将正常工作

Answer 3

如果不想删除 margin:auto 也不想修复 height.Better 可能有点复杂，请参阅

的示例

bootstrap carousel example

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

Make height of the carousel same as the height of the image, ignoring the margin of the image

html

css

ng-bootstrap