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.

Solution 1

You have:

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

Change the height to 100%.

Solution 2

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...

Solution 3

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

Solution 4

Looking at it in Chrome, the default max-width: 100% seems to not be what you want.

In your CSS, you can add to the already defined rules to get the browser to use the default.

.carousel .item > img { max-width: none }

It's worth noting that you specify min-width: 100% combined with an absolute height, so on large screens (like mine, which is 1080p), it will still distort the image if it gets too wide, thus changing the aspect ratio and again distorting the image.

View more solutions

Comments

[CrandellWS]

see this question stackoverflow.com/questions/10591422/…

[kaklon]

That's fine, I'd add background-size: cover; to fill the space

[Tim Ogilvy]

Sounds good, I will test this at some point and update my answer - unless you have an example link I can check already.

[user3786102]

This worked really well for me. I'm using Foundations Interchange in my Bootstrap carousel but I wasn't happy with how my images were being squished and expanded when resizing the browser. Thanks!