Bootstrap 3图像不会填充轮播，卡在左边答案

【问题标题】：Bootstrap 3 Image will not fill Carousel, stuck at leftBootstrap 3图像不会填充轮播，卡在左边
【发布时间】：2014-03-26 15:01:18
【问题描述】：

我已经尝试让这个旋转木马工作了几个小时，但我似乎没有收到想要的结果，而且 getbootstrap.com 上的文档对于与此相关的任何细微差别都不是很具体（通常你可以复制粘贴他们的代码就可以了）。

基本上，我有来自first example here 的默认代码和我的修改：

<div class="row">

    <div class="col-md-12">

        <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">
                <div class="item active">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
                <div class="item">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
                <div class="item">
                    <img class="center-block" src="assets/img/rate-shop-black.png">
                    <div class="carousel-caption">
                        <h3>Rate Shopping Tool</h3>
                        <p>Always get the best rates possible when using our best-in-class rate shopping tool.
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

    </div>
</div>

我发现Carousel image doesn't fill the width in bootstrap 3 的资源之一提到在 Img 标记上设置 width="100%"，但这会导致图像爆炸到天文数字。

我发现另一个资源提到使图像更大，所以我进入variables.less 并发现@screen-lg 的宽度设置为1200px 所以我回到 Gimp 并将基本画布大小增加到@987654328 @。这看起来更好，但在 .carousel-control 元素上开始渐变之前，轮播中图像的任一侧仍有至少一英寸显示纯白色。

还值得注意的是，除非我对它们应用 .center-block 类，否则图像会“粘”在轮播的左侧，这让我更接近我想要的效果，这不是问题。

我想知道我是否应该再次增加图像大小，如果需要增加多少？整页（无.container）轮播的图像需要多大？那些包裹在.container 中的人呢？

或者我是否遗漏了导致这种情况发生的部分标记？

下面是我目前看到的正在制作的图片。

【问题讨论】：

基本上图像的行为应如此。将 img 标签的宽度设置为 %100 将使图像拉伸到其父级的 100%。我假设是 .carousel-inner 类。所以有两个选择。将.carousel-inner的父级宽度设置为所需的px宽度，然后将img标签设置为100%，或者继续调整img标签的大小，直到满意为止。
@AlexGrant 我很欣赏这一点，但是当我将图像宽度设置为 100% 时，它会完全填满屏幕（而且我在一个非常大的显示器上）。您是否偶然知道我应该为此使用什么图像尺寸？
这取决于你的口味。尝试将父级设置为 max-width:1400px;宽度：100%；然后将img标签设置为width: 100%;
Alex 是对的……你要么需要让父级有一个最大宽度，这样图像就不会伸展太多，要么你需要让图像伸展。如果图像拉伸，您可以使用更大版本的图像使其看起来更好，但是您需要用户下载更大的文件......一切都是一个权衡。

标签： html css twitter-bootstrap-3 carousel

【解决方案1】：

这是给你的 jsFiddle。

将父滑块宽度设置为 100%，最大宽度为 1400px；将滑块居中，在大型显示器上时不会太大。您可以根据自己的喜好调整 max-width 属性。

http://jsfiddle.net/4sBED/1/

#carousel-example-generic {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

【讨论】：