title: Twitter Bootstrap carousel different height images cause bouncing arrows
body: <p>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..</p>
  
  <p>This is the code I'm using for my carousel:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;img src="image_url_300height"/&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;...&lt;/h4&gt;
                  &lt;p&gt;...&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="image_url_700height" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Carousel nav --&gt;
      &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
      &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is also illustrated in this <a href="http://jsfiddle.net/dsummersl/5BMr8/5/" rel="noreferrer">jsfiddle</a> (Admittedly not mine, I found this on a separate question while trying to solve this problem!)</p>
  
  <p>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?</p>