相关疑难解决方法(0)

我正在使用带有三张幻灯片的基本Bootstrap Carousel.在我实现滑块之前,我通过其各自div的css background-image获得了一个静态图像.在我的CSS中,我使用的是background-size:cover,并且非常喜欢图像响应不同浏览器宽度的方式.根据图像的宽度,我可以使图像的重要部分始终保持可见和居中,而两侧的额外宽度仅在宽屏显示器上可见,作为附加效果.

我现在想要保留相同的图像行为,因为我正在使用Bootstrap的Carousel,但即使我为幻灯片的视口指定尺寸,我仍然无法显示我的背景图像.我目前已将其设置为每个幻灯片显示一个单独的css类,每个幻灯片都有不同的背景图像,因此它可以在三个图像之间滚动.

如果通过背景图像无法做到这一点,那么还有另一种操作图像元素的方法,因此它们的显示行为与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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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 …