/ bootstrap

bootstrap-carousel

轮播的图片宽度不够怎么办?

1.让轮播的图片居中显示。
2.将轮播图的两侧截取一部分出来,作为轮播的背景。

<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>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" style="background:url(images/banner_bg1.png) repeat-x;">
                <img src="/images/banner1.jpg" alt="banner1">
                <div class="carousel-caption"></div>
            </div>
            <div class="item" style="background:url(/images/banner_bg2.png) repeat-x;">
                <img src="/images/banner2.jpg" alt="banner2">
                <div class="carousel-caption"></div>
            </div>
            <div class="item" style="background:url(/images/banner_bg3.png) repeat-x;">
                <img src="/images/banner3.jpg" alt="banner3">
                <div class="carousel-caption"></div>
            </div>
        </div>
    </div>

让轮播图片居中:

.carousel-inner > .item > img {
    margin: 0 auto;
}

banner_bg1.png 要和 banner1.jpg 的边缘保持一致,这样看上去才像是一张完整的图片,而不是拼接而成的。