【发布时间】：2012-11-19 01:05:34
【问题描述】：
我正在使用带有三张幻灯片的基本 Bootstrap Carousel。在我实现滑块之前，我通过其各自 div 的 css background-image 获得了一张静态图像。在我的 CSS 中，我使用了 background-size:cover，并且非常喜欢图像响应不同浏览器宽度的方式。根据图像的宽度，我可以让图像的重要部分始终保持可见和居中，而两侧的额外宽度仅在宽屏显示器上可见作为附加效果。
现在我正在使用 Bootstrap 的 Carousel，我想保留相同的图像行为，但即使我为幻灯片的视口分配了尺寸，我仍然无法显示我的背景图像。我目前已对其进行了设置，因此每张幻灯片都显示一个单独的 css 类，并且每张幻灯片都有不同的背景图像，因此它可以在三个图像之间滚动。
如果通过 background-image 无法做到这一点，是否有另一种方法来操作图像元素，使其显示行为与 background-size:cover 相同？
这是我的 HTML：
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item ad1">
<img src="{{ STATIC_URL }}img/TestBannerAd.png">
</div>
<div class="item ad2">
<img src="{{ STATIC_URL }}img/TestBannerAd2.png">
</div>
<div class="item ad3">
<img src="{{ STATIC_URL }}img/TestBannerAd3.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
还有我的 CSS：
#myCarousel {
width: 100%;
}
.carousel-control {
margin-top: 20px;
}
.carousel-inner {
width: 100%;
height: 400px;
}
.ad1 {
background: url(../img/TestBannerAd.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ad2 {
background: url(../img/TestBannerAd2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ad3 {
background: url(../img/TestBannerAd3.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
希望这不是一个愚蠢的问题，我们可以解决这个问题！
【问题讨论】：
标签： css twitter-bootstrap slider background-image