Bootstrap 更改轮播高度

Posted 2023-02-16

【中文标题】Bootstrap 更改轮播高度

【英文标题】：Bootstrap change carousel height

【发布时间】：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;

【问题讨论】：

您在问题中打错字

减小尺寸的最佳方法是改变图像高度

【参考方案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" >

【参考方案7】：

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

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


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