Question

我正在使用twitter bootstrap创建一个网站。我在这里预览：preview

我正在尝试制作全宽背景滑块。如果您以1100px以上的分辨率进行预览，它看起来很好，我想要它。但是你会注意到，如果缩小浏览器窗口，图像会保持左对齐而不是居中在窗口中并切断边缘（这就是我想要的）。我试图解决这个问题，但却无法找到解决方案。我很感激任何想法。

以下是滑块的代码：

<!-- Slider Top -->
    <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>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img src="img/backgrounds/01.jpg" alt="graduation gift" /></div>
            <div class="item"><img src="img/backgrounds/02.jpg" alt="graduation gift" /></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- End Slider Top -->

    <!-- Slider Overlay -->
    <div class="container">
        <div class="row">
            <div class="span4 sliderFeature">
                <h1 class="whiteShadow">Primary Heading</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="signUp">
                    <h4>Get Started With GraduationGifts.com</h4>
                    <a href="#" class="btn btn-primary full-button">Start a Registry</a><br />
                    <a href="#" class="btn btn-primary full-button">Find a Registry</a>
                    <p class="smallText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- End Slider Overlay -->

这是我的CSS：

    /* Slider */
.carousel {
    position:absolute !important;
}

div.signUp {
    background:url(../img/trans-white.png) repeat;
    border:1px solid #c5c5c5;
    padding:20px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
}

.full-button {
    width:92%;
    text-align:center;
    padding:10px 12px;
    margin-bottom:12px;
}

p.smallText {
    font-size:11px;
}

.sliderFeature {
    padding-top:20px;
    width:50%;
}

div#myCarousel {
    border-bottom:4px solid #164466;
}

Answer 1

您可以在center oversized image in div找到解决方案，其中Guffa提供jsfiddle。

它帮助我安排好了。

要在bootstrap中使用，请创建一个全宽容器。将提供的代码中的选择器更改为：全宽容器而不是.imageContainer，.carousel而不是.imageCenterer，和.carousel .item img而不是.imageCenterer img。

中心图像和截断边缘Twitter Bootstrap

1 个答案: