4

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.

Derek
  • 5,137
  • 9
  • 28
  • 39
  • see this question http://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly – CrandellWS Jul 27 '15 at 23:06

7 Answers7

10

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

Tim Ogilvy
  • 1,923
  • 1
  • 24
  • 36
4

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

Ira Herman
  • 2,796
  • 1
  • 23
  • 22
  • 1
    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! – user3786102 Jul 22 '16 at 20:36
3

You have:

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

Change the height to 100%.

Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
Zubzob
  • 2,653
  • 4
  • 29
  • 44
1

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.

pickypg
  • 22,034
  • 5
  • 72
  • 84
0

OK, the best I could do was this…

/* Carousel base class */
.carousel {
  height: auto;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 35;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    background:#e64c6c;
    border:.5px solid #e7c1af;
    overflow:hidden;
    padding:3px;
    min-height: 500px; 
}
.carousel-inner > .item > img {
    float:right;
    padding: 2px;
    padding-left: 3px;
    min-width: 500px;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #e7c1af;
}
Ryan Fishel
  • 1
0

With bootstrap 3.3.7, I could fix this issue by simply removing the 'height' line in carousel.css here:

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}
bfredo123
  • 462
  • 1
  • 8
  • 20
0

In my case the image was distorted when the screen size increased. I was working off one of the start Bootstrap free templates (https://startbootstrap.com/) using Bootstrap 4.

Based on the answer above from Ira Herman (and I would comment if I had enough credit points), I ended up with the code below to solve my problem:

.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  height: 32rem;
  object-fit: cover;
  overflow: hidden;
  object-position: 20% 19%;
}

The object-position x and y coordinates can be tweaked depending how you want the image to increase, decrease. Adjusting the image from the right also helped in my case. I hope that helps.

Jonesyd
  • 1
  • 2