我该如何修复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;
}