Bootstrap轮播不同高度的图像导致弹跳

Question

我一直在使用Bootstrap 3.3.7v的旋转木马类，它一直在使用    到目前为止，直截了当，但我遇到的一个问题是    不同的高度导致它下面的div反弹并且图像是    溢出旋转木马。我用谷歌搜索并跟进了一些答案    stackoverflow，但那些没有解决我的问题。我简短地请求任何人    解释这个问题。

R

Answer 1

您可以将图像的css设置为覆盖旋转木马，然后在旋转木马上设置最大高度。

img{
object-fit:cover;
object-position:center;
}

.item{
width:100%
height:100%
}

.carousel{
width:100%
min-height:500px;
max-height:860px;
}

我不确定Bootstrap 3，但我知道BS4有一个.img-fluid类也可以适合图像。

Answer 2

您可以使用样式或类

来修复高度和宽度

<img src='somethng' style="width:50px; height:50px" >