Twitter Bootstrap: Have carousel images full width and height

Twitter Bootstrap: Have carousel images full width and height

this seems as a trivial question but after a couple of hours fiddling with the Twitter Bootstrap carousel in their example (http://twitter.github.io/bootstrap/examples/carousel.html) I resort to SO for some help.
I want the carousel to display the full width (as now) but not with a cropped height. I have tried setting min-height, height etc. to 100% in different containers but with no result. Any two cents?

Solutions/Answers:

Solution 1:

For Bootstrap 3, all you need is:

.carousel img {
    min-width: 100%;
}

Solution 2:

From the example carousel on the bootstrap site, if you resize the browser window you’ll see that the image is actually being stretched in the x-axis. To accomplish the same effect, use their CSS:

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

The last two attributes, min-width and height, are of importance. The height is set to the desired size of the carousel.

Related:  CSS loading locally but not in Heroku for a rails app

Finally, you will want to use img tags to place your image, rather than a background-image. Here’s a fuller example:

<div class="item">
    <img src="image.jpg" />
    <div class="container">
        <div class="carousel-caption">
            <h1>Header</h1>
            <p class="lead">This is a caption</p>
            <a class="btn btn-large btn-primary" href="#">Large Button</a>
        </div>
    </div>
</div>

I hope this helps. Cheers!

Solution 3:

Think I have got a solution with simple CSS changes? Just change the following from (OLD) to;

    .carousel {
  /*height: 500px; OLD*/
  /*margin-bottom: 60px; OLD*/

  /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
  margin:0 auto 60px;
}

.carousel .item {
    /*height: 500px; OLD*/
    /*background-color: #777; OLD*/

    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  /*position: absolute; OLD+WHY?*/
  /*top: 0; OLD+WHY?*/
  /*left: 0; OLD+WHY?*/

  min-width:100%;
  height:auto;
}

Solution 4:

Use the following for each image you want to insert in the slide:

<img class="img-responsive center-block" src="#"> 

Solution 5:

Though this dates back 3 years, solution given by ‘Nate Beers’ solved my problem, when using Bootstrap 3.3.7

Its because ‘max-width’ sets the maximum width of the element which overrides width property when width is greater than max-width.

Related:  Twitter bootstrap - open modal over an already opened modal

Also ‘min-width’ always overrides the ‘max-width’.

Here is an example in codepen, resize the preview window to see how it works.

Check the below element in particular by resizing to the smallest possible width and compare with 2 other elements i1 and i2.

<div class="i3">Sample</div>

Solution 6:

You can simply change their css to this but it will cause your image to crop of what doesn’t fit:

.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 500px; /* <--- Change this line to min-height */
 }

References