title: Images are cut off using bootstrap class img-responsive and jcarousel
body: <p>I'm trying to get jcarousel.js and bootstrap to display images. I'm using the <a href="http://sorgalla.com/jcarousel/examples/" rel="nofollow">connected carousel</a> example, but slightly modified to use bootstrap css.</p>
  
  <p>Here is the following code:</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Connected Carousels - jCarousel Examples&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
          &lt;!-- Example assets --&gt;
          &lt;link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css"&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js?raw=1"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="jcarousel.connected-carousels.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-7"&gt;
  
              &lt;div class="connected-carousels"&gt;
                  &lt;div class="stage"&gt;
                      &lt;div class="carousel carousel-stage"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;img class="img-responsive" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="600" height="400" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img class="img-responsive" src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="600" height="400" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img class="img-responsive" src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="600" height="400" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img class="img-responsive" src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="600" height="400" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img class="img-responsive" src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="600" height="400" alt=""&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;p class="photo-credits"&gt;
                          Photos by &lt;a href="http://www.mw-fotografie.de"&gt;Marc Wiegelmann&lt;/a&gt;
                      &lt;/p&gt;
                      &lt;a href="#" class="prev prev-stage"&gt;&lt;span&gt;&amp;lsaquo;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="#" class="next next-stage"&gt;&lt;span&gt;&amp;rsaquo;&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="navigation"&gt;
                      &lt;a href="#" class="prev prev-navigation"&gt;&amp;lsaquo;&lt;/a&gt;
                      &lt;a href="#" class="next next-navigation"&gt;&amp;rsaquo;&lt;/a&gt;
                      &lt;div class="carousel carousel-navigation"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="50" height="50" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="50" height="50" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="50" height="50" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="50" height="50" alt=""&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;img src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="50" height="50" alt=""&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="col-xs-5"&gt;
                  &lt;h3&gt; Hello World &lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can get <code>jcarousel.connected-carousels.css</code> and <code>jcarousel.connected-carousels.js</code> on <a href="https://github.com/jsor/jcarousel/tree/master/examples/connected-carousels" rel="nofollow">jcarousel github</a>.</p>
  
  <p>The images were pulled randomly off the net, but all the images have different sizes, and only the stage images have the class <code>img-responsive</code>. However, when the page is viewed, all the images seem to be cut off in some way: </p>
  
  <ul>
  <li><p>The first image seems fine, although I'm not sure because of all the problems with the other images.</p></li>
  <li><p>The second image shows the camera cut off at the bottom lens</p></li>
  <li><p>The third image shows the humanoid's feet slightly cut off</p></li>
  <li><p>The fourth and fifth images have both been severely cut off.</p></li>
  </ul>
  
  <p>Without <code>img-responsive</code>, the images are either stretched or cut off in some way.</p>
  
  <p><strong>How do I preserve the image ratios and have them fit inside the stage div?</strong></p>