Bootstrap 更改轮播高度

Question

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

这是一个全宽 bootstrap 轮播。

我想更改高度但仍保持全宽。

高度是由图片高度决定的。

如何改变轮播的高度并保持其 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

来自Bootstrap 4

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

Answer 3

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

适合对象：封面；

保持不同 window 尺寸的纵横比

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

Answer 7

如果有人来这里是为了准确查找标题指向的内容，这将有所帮助（请记住在 Bootstrap v4 中使用 jQuery 是可以的）：

$.fn.normalizeHeight = function () {
    $(this).css("height", Math.max.apply(null, $(this).children().map(function () {
        return $(this).height();
    })) + "px");

    return this;
};

它会被简单地调用为：

$("#slider .carousel-inner").normalizeHeight();

$(window).on('resize', function () {
  $("#slider .carousel-inner").normalizeHeight();
});

它符合 ES5 + 可以在其他需要等于 child 高度的情况下工作。

Bootstrap 更改轮播高度

Bootstrap change carousel height

css

carousel

twitter-bootstrap