如何使 Bootstrap Carousel 中的图像具有响应性？

Question

有没有办法让您的图像在引导程序的轮播中以固定高度响应？我什么都试过了。我还使用了 img-responsive，并且在 CSS 中我也尝试了所有方法。

这是我的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 -->

这是我的 CSS

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

Answer 1

试试这个 jq，它使你的 .carousel-inner 成为窗口高度。但请记住 - 高度您的导航栏，页脚等。您必须的所有其他元素/ div 高度 -.

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();

Answer 2

试试这个 bootsnip http://bootsnipp.com/snippets/featured/simple-responsive-carousel。这是一个很好的网站，可以提供一些有用的复制粘贴 snippets 以进行引导。

Answer 3

我知道这对派对来说有点晚了，但我最近遇到了这个问题，并通过为每个项目提供自己的 ID，然后将图像设置为元素作为 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>

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