gleiche wie die Höhe des Bildes, ohne auf den Rand des Bildes

Question

ich ngb-carousel bin mit wie in der Dokumentation erwähnte hier: https://ng-bootstrap.github.io/#/components/carousel

Code:

In app.ts:

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

In karussell 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> 

Im Karussell-basic.css:

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

ngb-carousel { 
    background-color: black; 
} 

Ausgang:

Plunk:

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

Ich möchte Stellen Sie die Höhe des Karussells auf die Höhe des Bildes ein und ignorieren Sie dabei die vom Bild verwendeten Ränder.

Also, kurz gesagt, schwarze Teile, die im obigen Bild gezeigt werden, sollten nicht erscheinen und auch die Überschriften und Indikatoren sollten sich auf dem Bild bewegen.

Answer 1

kann es etwas kompliziert, wenn nicht wollen, Marge entfernen: Auto und auch wollen nicht die height.Better finden Sie in diesem Beispiel

bootstrap carousel example

Answer 2

Wenn Sie CSS ändern können, dann aktualisieren Sie unten Teil von 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

Give Höhe carousel-item die auf Ihre Bildhöhe gleich sein sollte. Es wird funktionieren