title: Maintain image aspect ratio in carousel
body: <p>I am using Bootstrap to create a carousel, I have large images so when the screen is smaller than the image, the ratio is not kept.</p>
  
  <p>How could I change that?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>.carousel .item {
    height: 500px;
  }
  .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/DRQkQ/">http://jsfiddle.net/DRQkQ/</a></p>
  
  <p>I need the image to fit 100% width but keep its height of 500px (I think it's 500px) this should mean that on smaller screen we don't see the far left and far right of the image.</p>
  
  <p>I tried containing the image in a div and add</p>
  
  <pre><code>overflow: hidden;
  width: 100%;
  height: 500px;
  display: block;
  margin: 0 auto;
  </code></pre>
  
  <p>But it doesn't work</p>
  
  <p>Thank you!</p>