Html 中心图像和切割边缘推特引导

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

我正在尝试制作一个全宽背景滑块。如果你预览的分辨率在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 -->

---

您可以在以下位置找到解决方案：Guffa提供JSFIDLE

它帮助我建立了我的

要在引导中使用，请创建一个全宽度容器。

---

将提供的代码中的选择器更改为：全宽容器而不是.imageContainer、.carousel而不是.imagecenter，和.carousel.item img而不是.imagecenter img。

我建议使用此作为基础，并将您的代码与之匹配：将

宽度：100%

添加到

#myCarousel

不会起作用吗？不会，因为它完全符合BIlly Moat提供的链接。这在大多数情况下都很好，但是宽度：100%会拉伸我的图像。所以我的研究生女孩看起来像个小丑哈哈。我开始觉得这可能是一件不容易做到的事情。可能需要某种自定义jquery。

    /* 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;
}