Bootstrap 更改轮播高度答案

【问题标题】：Bootstrap change carousel heightBootstrap 更改轮播高度
【发布时间】：2015-04-19 19:49:14
【问题描述】：

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

这是一个全宽引导轮播。

我想改变高度并保持全宽。

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

如何改变旋转木马的高度并保持 100% 宽度。

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

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

【问题讨论】：

您在问题中打错字
减小尺寸的最佳方法是改变图像高度

标签： css twitter-bootstrap carousel

【解决方案1】：

以下应该可以工作

.carousel .item {
  height: 300px;
}

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

JSFille 供参考。

【讨论】：

这不会改变图像大小。轮播会改变大小，但不会改变图像。我想我希望像background-size:cover; 这样图像会延伸jsfiddle.net/gh4Lur4b/17
哦，我明白你的意思了。抱歉，您最初的问题并不清楚。请查看我的更新答案。
但是现在当窗口变小时图像被压扁了。在您的 jsfiddle 中，当窗口变大时，图像不会被拉伸而是会扩展。当窗口变小时，我需要类似的效果。
你知道这些图片吗？换句话说，您可以在 CSS 中访问它们吗？
此外，如果您使用 50% 作为高度，此方法似乎不起作用。有谁知道该怎么做？谢谢。

【解决方案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;
}

【讨论】：

只为 Bootstrap 4 说话（我没有看过旧的），你的意思是 .carousel .carousel-item { height: ..... ，而不是 .carousel .item ？
bootstrap 4 及更高版本的优秀答案将.item 替换为.carousel-item，如上面的评论所述。

【解决方案3】：

来自 Bootstrap 4

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

【讨论】：

【解决方案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
 }
}

【讨论】：

【解决方案5】：

如果有人来这里寻找标题所指的内容，这将有所帮助（记住在 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 标准 + 可以在其他需要的相等子高度下工作。

【讨论】：

【解决方案6】：

对于引导程序 4

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

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

【讨论】：

【解决方案7】：

尝试遵循它应该可以工作：

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

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

【讨论】：