全屏转盘图像（自举）(Fullscreen carousel image (bootstrap))

的jsfiddle： http://jsfiddle.net/thishall/udVE3/

我希望通过添加CSS，使画面充满屏幕，想伸展图像进行任何屏幕。

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active"><img src="http://placehold.it/600x480"></div>
        <div class="item"><img src="http://placehold.it/600x480"></div>
        <div class="item"><img src="http://placehold.it/600x480"></div>
    </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Answer 1:

下面是做到这一点的方法之一。 我敢肯定有一个更优雅的方式，但这应该工作。

在样式表中创建一个类，如下所示：

.fullscrn{
height: 100%;
width:100%;
}

这个类添加到您的代码如下所示：

<div id="myCarousel" class="carousel slide fullscrn">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="item active fullscrn">
            <img src="http://placehold.it/600x480" class="fullscrn" />
        </div>
        <div class="item fullscrn">
            <img src="http://placehold.it/600x480" class="fullscrn" />
        </div>
        <div class="item fullscrn">
            <img src="http://placehold.it/600x480" class="fullscrn" />
        </div>
    </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

现在的图像应该延伸到整个屏幕。 但是，您可能会注意到转盘在底部的一些空白。 这是因为在引导程序通过您的传送带DIV的底部增加了一个20像素的保证金carousel类。

您可以通过添加其他类到您解决这个myCarousel DIV，消除底边距：

.nobtmmargin{
margin-bottom: 0px;
}

然后应用类：

<div id="myCarousel" class="carousel slide fullsrcn nobtmmargin">

文章来源: Fullscreen carousel image (bootstrap)