試圖讓Bootstrap 3旋轉木馬適合全屏？

Question

當我運行這個形象和旋轉木馬溢出，你必須向下滾動頁面上看到的圖像和轉盤的底部...

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
<li data-target="#carousel-example-generic" data-slide-to="3"></li> 
</ol> 
<!-- Wrapper for slides --> 

<div class="carousel-inner"> 
    <div class="item active"> 
<img src= "/assets/run3.jpg" width = "100%" alt="photo"> 
<div class="carousel-caption"> 
     <h3>Sign Up Now!</h3> 
<p>This is Where amazing happens</p> 
    </div> 
    </div> 


<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left"></span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
</a> 
</div> 

會出現以下情況：dropbox.com/sh/tdo3928f453123h/jTbquZNM37

Answer 1

你可以強迫你的滑塊&圖像的寬度和高度：

#carousel-example-generic, 
#carousel-example-generic .item, 
#carousel-example-generic .item img { 
    height: 100%; 
} 
#carousel-example-generic .item img { 
    width: 100%; 
} 

Bootply

注意：這不會保持比例，但它可以滿足您的需求。