Twitter Bootstrap: Have carousel images full width and height

Question

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/carou

Answer 1

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.

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>

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

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!

Answer 3

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 */
 }

Answer 4

For Bootstrap 3, all you need is:

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

Answer 5

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

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

Answer 6

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;
}