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

Question

有没有办法让你的图像在bootstrap的旋转木马响应固定高度？我已经尝试了一切.我也使用了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

首先,您必须检查Bootstrap提供的功能,特别是网格系统和响应实用程序.

Bootstrap 3.2.0 - CSS

然后,为了执行良好的响应过程,宽度和高度应根据当前屏幕大小调整大小.

此外,您可以在StackOverflow上找到相关问题,例如:

如何使bootstrap轮播图像响应？

Answer 2

试试这个 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();