我有 bootstrap carousel 工作，当窗口变小时图像大小正确调整。但是，周围的容器保持与大时相同的高度。
这是因为我的 height: 380px 在 .item css 和 max-height: 380px 在 .carousel 类中。
任何设置高度的尝试:自动；或高度: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) 随图片调整大小。 任何帮助表示赞赏。
编辑: 这是一个 fiddle :
由于某种原因，轮播部分不起作用，但您可以看到灰色 .item 区域没有调整大小的效果。
最佳答案
是的，这是可能的。但是不需要为了对齐而写太多的css代码。在这里，我为类 item 使用了 padding 和 background 属性。这里是 CSS
.item {
background: none repeat scroll 0 0 #808080;
padding: 5% 0;
max-width: 600px;
}
这里是jsfiddle .
关于css - Bootstrap 轮播图像响应但容器/元素没有，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21669124/