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...

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