bootstrap 3 carousel fixed height

Question

See the following two screenshots of the same carousel from Bootstrap 3 with different size images in it.

First screenshot: Second screenshot:

Html for the inner carousel.

<div class="carousel-inner" role="listbox">
    .
    .
    <div class="item">
        <img class="img-responsive center-block" src="...">
    </div>
    .
    .
</div>

Both the carousel and the table are contained in a class="row" with both inside it's own class="col-md-6".

As you can see this is ugly as the carousel keeps changing heights with the different heights of the images. I won't accept "Your source images should all have the same heights" as an answer.

I want the carousel be of a fixed height and the images should scale accordingly (preferably the same height as the table). Also if possible I'd like to fix this with one of the bootstrap classes provided instead of adding custom css. I've already read to add a fixed width (or height) for the carousel, but I don't find this to be a good solution, because

1. Custom css
2. It's not responsive, it should stay col-md-6 being half of the row!

So does anyone know an elegant, robust and responsive way of fixing this problem? Maybe with Javascript?

NOTE I know there are other carousels out there, but suggesting that is not an answer for my question. My question addresses bootstrap's carousel.

Answer 1

I just add a div tag before and after each item. The added div tag should be nested inside of the div tag that has the class "item". The actual carousel item will then be nested inside of the newly added div tag. Here is an example in your case:

<div class="carousel-inner" role="listbox">
    .
    .
    <div class="item">
      <div class="container" style="display:block;width:100%;height:350px;overflow:hidden;">

        <img class="img-responsive center-block" src="..."><!-- actual item -->

      </div>
    </div>
    .
    .
</div>

You would adjust the height to accommodate the largest item in your carousel. That's it.

Answer 2

The problem is not the images indeed as you requested as not accepted answer.

Col-* in BootStrap are declared with "float: left" and therefore not listening to the height of its siblings. That is why the carousel has a different height compared to the table.

What you could do is to declare the containers of the carousel and table as "display: table-cell" with a parent declared with "display: table;". Yes, table cells with divs. Why not use an HTML-table instead. Well, td's stand always next to each other and "display: table-cell"'s not. They will 'move downwards' if they need more space (more responsive). This is a more suitable anwser to the question.

To make it even better. I advice you to use the row you've already defined with a Col as child and then create a table as described in the previous section. Doing this keeps your main design respond as desired.

Answer 3

I did a quick and dirty changing of the css in my browser on a carousel. It was a small change and seemed to do the trick.

I changed the a bit of css from

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
...
}

to:

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
...
      height: 200px;
}

So, if you can live with setting the image height to a fixed value, you could try that.