傳送帶圖像高度縮小

Question

我在索引頁上有一個傳送帶，但我注意到如果我縮小瀏覽器，圖像不會留在整個傳送帶內。

如果你不明白我的意思，這裏的旋轉木馬的圖像縮小瀏覽器後：

正如你所看到的，圖像的寬度響應瀏覽器窗口大小，但高度不，在圖像下面留下那個大的空白區域。

這裏是我當前的代碼：

<div class='carousel slide' id='hero' style='position: absolute;'> 
<div class='carousel-inner' style='z-index: -1'> 
<div class='active item'> 
    <img src='images/index/img1.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img2.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img3.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img4.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img5.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img6.jpg'> 
</div> 
</div> 
</div> 

如何讓轉盤內的圖像，以較小的瀏覽器窗口應對？

Answer 1

所以我經過一些更多的研究後自己修復了它。

在CSS，我有這樣的：

.carousel-inner { 
    overflow:hidden; 
    width:100%; 
    position:relative; 
} 

我通過把圖像的尺寸，而不是100％的寬度，所以固定它：

.carousel-inner { 
    overflow:hidden; 
    width:1920px; 
    height:1200px; 
    position:relative; 
}