Twitter Bootstrap carousel image appears distorted

Question

I'm building a web site based on a theme built with Twitter Bootstrap: http://demo.graphikaria.com/agilis/theme.

Whenever I decrease the width of my browser the background image for the home page carousel becomes distorted.

For the default faded background image the template uses, this isn't a big deal, but if you want to use a clear image or logo instead it will appear distorted or squished.

Answer 1

If you use an IMG tag, it will always end up no wider than its container DIV. Because bootstrap re-sizes fixed images for fluid layout, especially on mobile, the images are squished to the screen width.

An alternative that seems to work well so far for me is to use a <div> tag with a background image.

The class:

.carousel-inner > .item > .carousel-image {
    width: 100%;
    height: 500px; 
    text-align: center;
    align: center;
}

The Item Code:

#csl-item1 {
    background:url(img/carousel_image1.jpg); 
    background-repeat: no-repeat;   
    background-position: center top; 
}

The Item:

<div class="item active">
  <div id="csl-item1" class="carousel-image">&nbsp;</div>
  <div class="container">
    <div class="carousel-caption">
      <!-- Caption -->
    </div>
  </div>
</div>

I'd be curious to see if anyone has any bugs with this method tho, so let me know if you think its a bad idea...

Answer 2

The cleanest solution I've found is adding this css to your image in the slide:

object-fit: cover; 
overflow: hidden;

You can even just add it inline to the img tag:

<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">

There's a great write-up that shows examples of CSS3 properties and their impact on image aspect ratios here: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968