Bootstrap carousel setting auto height

Question

Is there a way to not set a height for the bootstrap carousel and let it work out the height automatically based on the image width being set at 100%? I understand it will bounce up and down in between slides which is fine. Currently for the bootstrap html I have:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="slider-image img-responsive " style="background-image: url(/folder/image.png); background-position: 50% 50%; background-size: cover;"></div>
        </div>
    </div>
</div>

With CSS:

#carousel, .item, .slider-image {
  height: auto;
  width: 100%;
}

With this I can't see image at all - it just sets the height to 0. Any ideas?

Answer 1

this code worked for me :

.carousel-inner {
 height:auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
  margin: auto;
  min-height:initial;
}

if you want to resize image you can add a css class to target image Good Luck

Answer 2

Instead of using a div and a background just put the image in the slide with the image tag and set the image width to 100%

HTML:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="path/to/image.jpg"/>
        </div>
    </div>
</div>

CSS:

#carousel .item img{
  width:100%;
}