Html 引导3图像无法填充旋转木马，卡在左侧

我已经试着让这个旋转木马工作了几个小时了，但我似乎没有收到预期的结果，getbootstrap.com上的文档也不是很具体，因为其中涉及到任何细微差别，通常你可以复制粘贴他们的代码，然后就可以了

基本上，我有来自的默认代码以及我的修改：

<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>

我找到的一个参考资料提到在Img标签上设置宽度为100%，但这会导致图像放大到天文数字的比例

我找到的另一个资源提到将图像放大，因此我进入variables.less，并发现@screen lg的宽度设置为1200px，因此我回到Gimp并将基本画布大小增加到1200px。这看起来更好，但在.carousel控件元素的渐变开始之前，旋转木马中图像的两侧至少有一英寸显示为纯白色

还值得注意的是，除非我对图像应用.center块类，否则图像会“粘”在旋转木马的左侧，这会使我更接近所需的效果，这不是问题

我想知道我是否应该再次增加图像大小，如果是的话，增加多少？对于整版的集装箱转盘，图像需要多大？那些用容器包装的怎么样

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

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

---

这是给你的一本JSFIDLE

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

---

基本上，图像的行为是它应该的。将img标记的宽度设置为%100将使图像拉伸到其父图像的100%。我假设它是.carousel内部类。所以有两个选择。将.carousel inner的父宽度设置为所需的px宽度，然后将img标记设置为100%，或者继续调整img标记的大小，直到您满意为止。@AlexGrant我很感激，但当我将图像宽度设置为100%时，它完全填满了屏幕，我在一个相当大的显示器上。你知道我应该用什么尺寸的图片吗？这取决于你的品味。尝试将父对象设置为最大宽度：1400px；宽度：100%；然后将img标签设置为宽度：100%；Alex是对的…您要么需要使父对象具有最大宽度，以便图像不会拉伸太多，要么需要让图像拉伸。如果图像拉伸，您可以使用更大版本的图像使其看起来更好，但是您要求用户下载更大的文件…一切都是一种权衡。

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