8

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 everything as well.

Here's my html

    <div class="item active">
      <img src="images/slide1.jpg" alt="First slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption" style="padding-bottom:90px;">
          <h1>Totes for all</h1>
          <p>Personalize your style</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

    <div class="item">
      <img src="images/slide2.png" alt="Second slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <div class="caption_background">
          <h1>Pattern it</h1>
          <p>Choose your favorite</p>
          </div>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->

Here's my CSS

http://paste.ubuntu.com/7908633/

jr.
  • 1,699
  • 14
  • 31
nattienatz
  • 137
  • 1
  • 1
  • 8
  • If you tried everything, then nope, there's no way... unless you didn't tried all, show us what you tried and what it fails. Good reading: http://stackoverflow.com/help/how-to-ask – gmo Jul 30 '14 at 21:37
  • Thanks @gmo ! Here's my CSS http://paste.ubuntu.com/7908633/ – nattienatz Jul 30 '14 at 21:38
  • @gmo I'm almost thinking to replace the carousel with a jumbotron when is on the xs resolution if I can't solve this problem.. But there must be a way!! – nattienatz Jul 30 '14 at 21:39
  • 1
    possible duplicate of [How to make bootstrap carousel image responsive?](http://stackoverflow.com/questions/21178012/how-to-make-bootstrap-carousel-image-responsive) – vdenotaris Jul 30 '14 at 21:43

3 Answers3

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();
Daniel Leth
  • 66
  • 1
  • 7
1

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

Aakash
  • 21,375
  • 7
  • 100
  • 81
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;
}
Andy Jacko
  • 11
  • 4