title: Twitter Bootstrap Carousel Stretching Images
body: <p>i'm looking to create a carousel using bootstrap. Everything I try with CSS breaks and the image ratio breaks and inherit the size of the carousel.<br>
  <a href="http://i.stack.imgur.com/K29db.png" rel="nofollow">http://i.stack.imgur.com/K29db.png</a>    </p>
  
  <pre><code>   &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="../../assets/img/test.png"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Example headline.&lt;/h1&gt;
            &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
  
  &lt;!-- Bootstrap core JavaScript
  ================================================== --&gt;
  &lt;!-- Placed at the end of the document so the pages load faster --&gt;
  &lt;script src="../../assets/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="../../dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="../../assets/js/holder.js"&gt;&lt;/script&gt;
  </code></pre>