CODEWITHSUNDEEP
twitter-bootstrapcarousel
Lasse
Lasse

Reputation: 349

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?

Upvotes: 19

Views: 72898

Answers (6)

SangyK
SangyK

Reputation: 839

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>

Upvotes: 1

Nate Beers
Nate Beers

Reputation: 1425

For Bootstrap 3, all you need is:

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

Upvotes: 17

Becky
Becky

Reputation: 11

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

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

Upvotes: 1

Kerry Smyth
Kerry Smyth

Reputation: 165

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

Upvotes: 1

user2998469
user2998469

Reputation: 1

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

Upvotes: -2

julian soro
julian soro

Reputation: 5238

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!

Upvotes: 8

Related Questions