Bootstrap 响应式图像轮播大小调整

Question

我正在使用引导程序为所有设备创建一个网站。该网站包含一个专门用于图像轮播的行。此轮播的代码如下。

<div class="row" id="imageCarouselRow">

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

        <div id="imageCarousel" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
                <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#imageCarousel" data-slide-to="1"></li>
                <li data-target="#imageCarousel" data-slide-to="2"></li>
                <li data-target="#imageCarousel" data-slide-to="3"></li>
                <li data-target="#imageCarousel" data-slide-to="4"></li>
            </ol>

            <div class="carousel-inner" role="listbox">

                <div class="item active">
                    <img src="Image link" class="img-responisve" alt="Caption">
                </div>

                <div class="item">
                    <img src="Image Link" class="img-responsive" alt="Caption">
                </div>

                <div class="item">
                    <img src="Image Link" class="img-responsive" alt="Caption">
                </div>

                <div class="item">
                    <img src="Image Link" class="img-responsive" alt="Caption">
                </div>

                <div class="item">
                    <img src="Image Link" class="img-responsive" alt="Caption">
                </div>

            </div>

        </div>

    </div>

</div>

如您所见，它包含 5 张不同的图片（实际的链接包含在实际代码中），所有这些图片我都提供了“img-responsive”类，因此这些图片可以缩放到不同的设备。

我的问题是图像轮播并没有占据整行，但我仍然希望它成为该行中唯一的东西。我也希望它是集中的。此外，在桌面上，由于轮播是整行图像的大小，因此图像将从我不想要的屏幕边缘过渡，我只希望图像从前一个图像的边缘过渡（即轮播不大于单个图像的大小）

每个单独的图像默认为 1025 x 424 像素。

到目前为止，我设法做到这一点的唯一方法是使 imageCarousel 类在外部样式表中具有以 px 或 em 为单位的大小，并为其赋予 0 auto 的边距属性，如下所示：

#imageCarousel{
    width: 1025px;
    height: 424px;
    margin: 0 auto;
}

我还设置了 em 的大小。问题是，如果我这样做，大小是静态的，这会阻止引导程序将站点缩放到不同的设备大小以及重新缩放浏览器窗口时。

有解决这个问题的办法吗？

Answer 1

对所有媒体使用所有类 例如 col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 对于图像响应性，请使用图像响应类 image-responsive 查看更多Sample

Answer 2

使用百分比而不是 em 或 px 来定义图像轮播的大小修复了问题