Twitter Bootstrap carousel different height images cause bouncing arrows

Question

I've been using Bootstrap's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the arrows to bounce up and down to adjust to the new height..

This is the code I'm using for my carousel:

<div id="myCarousel" class="carousel slide">     <div class="carousel-inner">         <div class="item active">             <img src="image_url_300height"/>             <div class="carousel-caption">                 <h4>...</h4>                 <p>...</p>             </div>         </div>         <div class="item">             <img src="image_url_700height" />         </div>     </div>     <!-- Carousel nav -->     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 

The problem is also illustrated in this jsfiddle (Admittedly not mine, I found this on a separate question while trying to solve this problem!)

My question is: How can I force the carousel to stay at a fixed height (second thumbnail in the fiddle) and center smaller images while keeping the captions and arrow in a static position relative to the carousel?

Answer 1

It looks like bootstrap less/CSS forces an automatic height to avoid stretching the image when the width has to change to be responsive. I switched it around to make the width auto and fix the height.

<div class="item peopleCarouselImg">   <img src="http://upload.wikimedia.org/...">   ... </div> 

I then define img with a class peopleCarouselImg like this:

.peopleCarouselImg img {   width: auto;   height: 225px;   max-height: 225px; } 

I fix my height to 225px. I let the width automatically adjust to keep the aspect ratio correct.

This seems to work for me.