Bootstrap carousel height

Question

I'm trying to build a carousel on my website, but my images do not have the same height. I searched on the web and i was surprised nobody used the "img-responsive" class, which actually do not work, or either am i not using it properly...

So my question is; why does the "img-responsive" class not work properly? (P.S. i tried fixing the max-height of the carousel-inner class, but the image do not resize properly)

Here's my code, could anyone help me ?

<div class="row">
    <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#Carousel" data-slide-to="0" class="active"></li>
            <li data-target="#Carousel" data-slide-to="1"></li>
            <li data-target="#Carousel" data-slide-to="2"></li>
            <li data-target="#Carousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner col-lg-12" role="listbox">
            <div class="item active">
                <img class="img-responsive" src="Images/Articles/Suisei_no_gargantia.jpg" alt="Suisei_no_gargantia">
                <div class="carousel-caption">
                    <h4>Header</h4>
                    <p>Sample text</p>
                </div>
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/Pokemon.jpg" alt="Pokemon">
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/Nisekoi.jpeg" alt="Nisekoi">
            </div>

            <div class="item">
                <img class="img-responsive" src="Images/Articles/High_School_Of_The_Dead.jpg" alt="High_School_Of_The_Dead">
            </div>
        </div>

     <!-- Left and right controls -->
        <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#Carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

I had the same problem, and also found the img-responsive class to be unhelpful as Bootstrap's carousel has no fixed height.

Suggest removing the img-responsive class.

I specified exact heights for the item div with media queries and added the following CSS to the img tag, like so :

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
#Carousel .carousel-inner .item {
    height:200px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
#Carousel .carousel-inner .item {
    height:300px;
} 
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#Carousel .carousel-inner .item {
    height:400px;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#Carousel .carousel-inner .item {
    height:500px;
}
}

#Carousel .carousel-inner .item img {
max-height: 100%;  
max-width: 100%; 
position: absolute;  
top: 0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;
}

Answer 2

I searched for the answer myself sometime ago and found nothing important. Somehow I get some CSS , that can solve the problem.

//Add following class in tag <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel">

.video-container{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 10px; height: 0; overflow:hidden;
}

.video-container div,
.video-container img,
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

it worked for me to get the images of same height and with with responsiveness.