title: How to make bootstrap carousel image responsive?
body: <p>I want to keep the same ratio of the images. The problem is it streches when the browser is wide.
  and squezes when it's reduced.</p>
  
  <p>I have checked all SO question here but most of them did not help me.</p>
  
  <p>Here is the <strong>markup:</strong></p>
  
  <pre><code>&lt;!-- Carousel
  ================================================== --&gt;
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&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="images/female/IMG_5053-2.jpg" 
             data-src="images/female/IMG_5053-2.jpg" alt="First slide"&gt;
  </code></pre>
  
  <hr>
  
  <p>and here is the <strong>CSS</strong></p>
  
  <pre><code>.carousel .item&gt;img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>I tried to make a jsfiddle but I couldnt here is the link to the page <a href="http://maanastore.com/home.php">http://maanastore.com/home.php</a></p>