我正在使用基本的Bootstrap Carousel,其中包含三个幻灯片。在实现幻灯片之前,我通过其各自div的css背景图像获得了一个静态图像。在我的CSS中,我使用了background-size:cover,并且非常喜欢图像对不同浏览器宽度的响应方式。根据我的图像宽度,我可以始终让图像的重要部分保持可见并居中,而两侧的额外宽度仅在宽屏监视器上作为附加效果可见。
现在我想保留相同的图像行为,但是即使我为幻灯片的视口分配了尺寸,我的背景图像仍然无法显示。我目前已将每个幻灯片设置为显示单独的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;
}
希望这不是一个愚蠢的问题,我们能够解决它!