Maintain Image Aspect Ratio in Carousel

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.

How to make Bootstrap Carousel maintain image aspect ratio?

Carousel images are responsive by default in latest Bootstrap 3 { display: block; max-width: 100%; height: auto; }. So, there is no need to add an.img-responsive class to your images. (Also, there is no need to wrap the .carousel-caption in a .container)

If you start with the sample markup here and remove your extra style overrides, you can see that the aspect ratio is properly maintained on different screen sizes. You can verify this using the same link above.

Related Topics