Maintain image aspect ratio in carousel

The issue lays here, on bootstrap CSS:

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Having set max-width: 100%; the image won't be any larger than the viewport. You need to override that behavior on your CSS:

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  max-width: none;
}

Note the max-width: none; added at the bottom. This is the default max-width value and unsets the limit.

Here's your fiddle updated.

I think it is better to handle it with CSS3 object-fit attribute.

If you have image with fixed width and height and still if you want to preserve the aspect ratio, you can use object-fit:contain;. It will maintain the ratio with given height and width.

For example :

img {
        height: 100px;
        width: 100px;
        object-fit: contain;
}

You can find more details here : http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Hope this will be useful to someone.

Delete the img tag inside the carousel item and add a background. In this way you can use the CSS3 cover property.

.item1 {
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}