jquery - 如何修复 Bootstrap 轮播尺寸？

Question

这是我正在制作的轮播。

此轮播的容器有 7 个 Bootstrap 列宽。我如何修复此轮播以适应容器的整个宽度，而不管图像宽度如何，图像是图像响应式的。

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 slider t">
<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>
        <li data-target="#myCarousel" data-slide-to = "2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="1.jpg" alt="img-responsive">
            <div class="carousel-caption">
                <h1 class="">some heading</h1>
            </div>
        </div>
        <div class="item">
            <img src="2.jpg" alt="img-responsive">
            <div class="carousel-caption">
            <h2>main heading</h2>
            </div>          
        </div>
        <div class="item">
            <img src="3.jpg" alt="img-responsive">
            <div class="carousel-caption">
                <h2>some heading</h2>
            </div>
        </div>
    </div>
</div>

Answer 1

我在我的一个元素中涉足了这一点。您想要的是 .item 填充 .carousel-inner，并且 .item 中的图像填充宽度并忽略高度限制。因此，您强制图像具有 100% 宽度，并且没有 max-height 属性，并让容器 .item 剪辑溢出。我在桌面设备上使用大约 500px 的高度限制，在平板电脑上使用 400px 的高度限制，在移动设备上使用 300px 的高度限制，不过您可以使用您想要的任何高度。想要。

.carousel-inner {
    height: 500px;
}

.carousel-inner .item {
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.carousel-inner .item img {
    width: 100%;
    min-height: 100%;
    max-height: none;
}