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

【问题标题】：Bootstrap carousel different height images cause bouncingBootstrap轮播不同高度的图像导致弹跳
【发布时间】：2018-01-26 18:34:22
【问题描述】：

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

<div class="col-md-6" style="padding:0px;">             
<div id="carousel-example-generic" class="carousel slide" data-    
ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" 
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">  

<div class="item active">
  <img src="images/slider/1.jpg" alt="blue">      
</div>

<div class="item">
  <img src="images/slider/2.jpg" alt="purple">     
</div>

<div class="item">
  <img src="images/slider/3.jpg" alt="red">     
</div>

<div class="item">
  <img src="images/slider/4.jpg" alt="red">     
</div>

<div class="item">
  <img src="images/slider/5.jpg" alt="red">     
</div>  
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" 
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

【问题讨论】：

为什么不指定图片的高度...
@Ashishsah，我应该这样使用 ??
你能把你的代码上传到jsbin或jsfiddle并提供链接吗？

标签： css twitter-bootstrap-3 carousel

【解决方案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 类也可以适合图像。

【讨论】：

我尝试了你的建议，但我遇到了同样的问题
@BharathPateru 我已经编辑了我的代码，希望这对你有用。
@BharathPateru 如另一条评论中所述，如果您可以为我们添加一个 jsfiddle，我们可以更轻松地提供帮助。 :)

【解决方案2】：

您可以使用样式或类来固定高度和宽度

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

【讨论】：

如果我按照你所说的设置轮播高度在 IE 和 Chrome 中是不同的，并且图像越来越模糊。