我该如何修复bootstrap轮播尺寸？

Question

这是我正在研究的旋转木马。

此轮播的容器是7个自举列宽。 如何修复此旋转木马以适应容器的整个宽度，无论图像宽度如何，图像都是图像响应。

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