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

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:

    
    

        

            
Header
            
This is a caption
            Large Button
        
    

I hope this helps. Cheers!