Bootstrap改变轮播高度

Question

我这里有一个jsfiddle - http://jsfiddle.net/gh4Lur4b/8/

这是一个全宽度的自举旋转木马.

我想改变高度,仍然保持全宽.

高度是由图像高度决定的.

如何调整转盘的高度并保持100%的宽度.

    .carousel-inner{
       // height: 300px;
    }

    .item, img{
        height: 100% !important;
        width:  100% !important;
        border: 1px solid red;
    }

Answer 1

以下应该有效

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

JSFille供参考.

Answer 2

谢谢！这篇文章很有帮助。您可能还想添加

适合对象：封面；

保留不同窗口大小的纵横比

.carousel .item {
  height: 500px;
}

.item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 500px;
}

对于 bootstrap 4 及以上版本替换.item为.carousel-item

.carousel .carousel-item {
  height: 500px;
}

.carousel-item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 500px;
}

Answer 3

来自Bootstrap 4

.carousel-item{
    height: 200px;
} 
.carousel-item img{
    height: 200px;
}