引导轮播图像响应但容器/项目不答案

【问题标题】：bootstrap carousel image responsive but container/item not引导轮播图像响应但容器/项目不
【发布时间】：2014-02-10 04:31:34
【问题描述】：

我有引导轮播，当窗口变小时，图像的大小可以正确调整。但是，周围的容器保持与大时相同的高度。

这是因为我在 .item css 中有 height: 380px ，在 .carousel 类中有 max-height: 380px 。

任何设置高度的尝试：自动；或高度：100%；我希望，可能允许容器/项目调整大小，导致图像完全消失。

这里的任何建议都是一些简化的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Carousel</title>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/carousel-SO.css" rel="stylesheet">
</head>

<body>
  <div class="container">

  <!--  Carousel -->
  <div class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
          <img src="http://tips4java.files.wordpress.com/2008/10/screen-image.jpg" />
      </div>
      <div class="item">
          <img src="http://fineartamerica.com/images/contestlogos/logo1-best-uplifting-image.jpg" />
      </div>
      <div class="item">
          <img src="http://www.nerd-age.com/wp-content/uploads/2011/11/Forge-Quest-featured-image.gif" />
      </div>
    </div><!-- .carousel-inner -->
  </div><!-- .carousel -->
</div> <!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 4000
    });
  });
</script>

</body>
</html>

这是 CSS：

body {
  color: #5A5A5A;
  padding-top: 20px;
  padding-bottom: 40px;
}

.carousel {
  max-height: 380px;
  max-width: 600px;
  margin: 0 auto;
}

.carousel .item {
  background-color: #777777;
  width: 100%;
  height: 380px;
}

.carousel-inner > .item > img {
  float: none;
  display: block;
  margin-top: 40px; 
  height: auto;
  top: 0;
  position: absolute;
}

我基本上希望灰色区域 (.item) 随图片一起调整大小。任何帮助表示赞赏。

编辑：这是一个小提琴：

http://jsfiddle.net/7DGjk/

由于某种原因，轮播部分不起作用，但您可以看到灰色 .item 区域未调整大小的效果。

【问题讨论】：

你能做jsfiddle吗
@Selva 就是那个小提琴。

标签： css twitter-bootstrap carousel

【解决方案1】：

是的，有可能。但是不需要写太多的css代码来对齐。这里我使用padding 和background 属性作为item 类。这里是css

.item {
   background: none repeat scroll 0 0 #808080;
   padding: 5% 0; 
   max-width: 600px;
}

这里是jsfiddle。

【讨论】：

哇。我什至不知道在那个背景下发生了什么，但它确实有效。谢谢。