Fullscreen carousel image (bootstrap)

问题

jsFiddle: http://jsfiddle.net/thishall/udVE3/

I want to make the picture full screen by adding css, want to stretch the images for any screen.

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

回答1:

Here's one way to do it. I'm sure there is a more elegant way, but this should work.

Create a class in your stylesheet like so:

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

Add this class to your code like so:

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

Now the image should stretch to full screen. However, you may notice that the carousel has some white space at the bottom. This is because Bootstrap adds a 20 pixel margin at the bottom of your carousel DIV via the carousel class.

You can fix this by adding another class to your myCarousel DIV that removes the bottom margin:

.nobtmmargin{
margin-bottom: 0px;
}

Then apply class:

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

来源：https://stackoverflow.com/questions/17475471/fullscreen-carousel-image-bootstrap

标签

twitter-bootstrap

fullscreen

carousel