CODEWITHSUNDEEP
csstwitter-bootstrap-3carousel
Bharath Pateru
Bharath Pateru

Reputation: 99

Bootstrap carousel different height images cause bouncing

I've been using Bootstrap 3.3.7v's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the divs under it bounce and the images are overflowing out the carousel. I have googled and followed some of answers in stackoverflow, but those not solved my problem. I request anyone briefly explain the issue. 

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

Upvotes: 1

Views: 3362

Answers (2)

user8478480
user8478480

Reputation: 435

You can set the css of the images to cover the carousel and then set a maximum height on the carousel.

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

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

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

I'm not sure about Bootstrap 3 but I know BS4 has a .img-fluid class that can fit images too.

Upvotes: 2

Dr. X
Dr. X

Reputation: 2920

You can fix the height and width with a style or class 

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

Upvotes: 0

Related Questions