Question

我有自举旋转木马工作，当窗口变小时图像被正确调整大小。但是，周围的容器保持与它大时相同的高度。

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

任何设置身高的尝试：auto;或身高：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区域没有调整大小的效果。

Answer 1

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

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

这里是jsfiddle。

bootstrap carousel图像响应但容器/项目没有

1 个答案: