0

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

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

这是我的滑块代码：

<!-- 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;
}
4

1 回答 1

1

您可以在以下位置找到解决方案：center oversized image in div其中 Guffa 提供了一个 jsfiddle。

它帮助我设置了我的。

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

于 2013-07-16T20:06:44.730 回答