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

原文由 ttmt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下应该工作

.carousel .item {
  height: 300px;
}

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

JSFiddle 供参考。

原文由 Bart Jedrocha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可能还想添加

object-fit: cover;

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

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

原文由 Brandon Walton 发布，翻译遵循 CC BY-SA 4.0 许可协议