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

来自引导程序4

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

Answer 3

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

object-fit：cover;

为不同的窗口尺寸保留宽高比

.carousel .item {
  height: 500px;
}

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

Answer 4

like Answers above, if you do bootstrap 4 just add few line of css to .carousel , carousel-inner ,carousel-item and img as follows

.carousel .carousel-inner{
height:500px
}
.carousel-inner .carousel-item img{
min-height:200px;
//prevent it from stretch in screen size < than 768px
object-fit:cover
}

@media(max-width:768px){
.carousel .carousel-inner{
//prevent it from adding a white space between carousel and container elements
height:auto
 }
}

Answer 5

对于Bootstrap 4

与图片在同一行添加height: 300px;

<img src="..." style="height: 300px;" class="d-block w-100" alt="image">

Answer 6

尝试遵循它应该可以：

.carousel .carousel-item {
    max-height:550px;
}

.carousel-item img {
    object-fit:cover;
    max-height:550px;
}

Bootstrap改变轮播高度

6 个答案: