How to make images in Bootstrap Carousel responsive?

Question

Is there a way to make your images within bootstrap\'s carousel responsive with a fixed height? I\'ve tried everything. I also used img-responsive, and in the CSS I tried

Answer 1

I know this is a little late to the party but I recently had this issue and overcame it by giving each item its own ID and then setting the images to the elements as background images in CSS...

<div id="header-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="cazza1" class="item active">
    </div>
    <div id="cazza2" class="item">
    </div>
    <div id="cazza3" class="item">
    </div>
  </div>
</div>

And the CSS:

#header-carousel {
  height: 240px;
}#cazza1 {
  height: 240px;
  background-image: url(/images/header1.jpg);
  background-position: center center;
  background-size: cover;
}#cazza2 {
  height: 240px;
  background-image: url(/images/header2.jpg);
  background-position: center center;
  background-size: cover;
}#cazza3 {
  height: 240px;
  background-image: url(/images/header3.jpg);
  background-position: center center;
  background-size: cover;
}

Answer 2

Try this bootsnip http://bootsnipp.com/snippets/featured/simple-responsive-carousel. This is a good website for some helpful copy-paste snippets for bootstrap.

Answer 3

Try this jq, it makes your .carousel-inner as window height. but remember to -height your navnbar, footer ect. all other elements/divs heights you have to -.

function init_carousel() {
            H = +($(window).height() /* -height here  */); // or $('.carousel-inner') as you want ...
            $('.carousel-inner').css('height', H + 'px');
        }
        window.onload = init_carousel;
        init_carousel();