使傳送帶一樣的圖像的高度的高度，而忽略

在文檔這裏提到我使用ngb-carousel圖像的邊緣：https://ng-bootstrap.github.io/#/components/carousel 使傳送帶一樣的圖像的高度的高度，而忽略

代碼：

在app.ts：

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

在轉盤-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>

在旋轉木馬basic.css：

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

ngb-carousel { 
    background-color: black; 
}

輸出：

普拉克：

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

我想使傳送帶的高度與圖像的高度相同，忽略圖像使用的邊距。

因此，簡而言之，上圖中顯示的黑色部分不應出現，標題和指示器也應在圖像上移動。

來源

2017-05-30 Vishal

@TeutaKoraqi的這個例子，我不想要100％的身高。我想保持高度和寬度之間的寬高比。 – Vishal

它可能有點複雜，如果不想刪除保證金：汽車，也沒有要修復的height.Better看到

bootstrap carousel example

來源

2017-05-30 13:11:22

你正在解釋我有點不對。我對保證金不感興趣。但我不想固定圖像的高度。我希望該圖像應保持其寬度和高度之間的縱橫比。雖然我只會看看你提供的例子。 – Vishal

這個答案有你的解決方案，但對於容器項目img，他們沒有使用保證金。 –

這適用於我的情況。感謝您的時間和精力。 – Vishal

如果你可以改變CSS，然後更新下面的CSS部分。

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

來源

2017-05-30 12:08:46 LKG

我不想指定高度，因爲我想保持原始圖像的寬高比。有沒有其他方法可以做到這一點？ – Vishal

如果你不需要它，你可以刪除或提供汽車.. – LKG

給高度carousel-item，它應該等於您的圖像高度。它會正常工作

來源

2017-05-30 12:10:56 vijayscode

我怎樣才能做到這一點使用CSS？因爲圖像的高度設置爲自動。 – Vishal

或給你的圖片高度：100％。 – vijayscode

我不想要100％身高。我想保持高度和寬度之間的寬高比。 – Vishal

使傳送帶一樣的圖像的高度的高度，而忽略

回答

相關問題