将"background-size:cover"应用于Twitter Bootstrap Carousel幻灯片

Question

我正在使用带有三张幻灯片的基本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 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;
}

希望这不是一个愚蠢的问题,我们可以解决这个问题!

Answer 1

我知道我的回答很晚,但我刚通过搜索找到了你的问题,做了类似的事情.首先,您需要从HTML中删除图像并更改CSS以将高度应用于轮播中带有"item"类的所有div.

将我的修改应用于您的代码应该是这样的:

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
     <div class="item active ad1">
        <div class="carousel-caption">
           <h4>First Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
     </div>
     <div class="item ad2">
        <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
     </div>
     <div class="item ad3">
        <div class="carousel-caption">
           <h4>Third Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
    </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 .item {
    width: 100%;
    height: 400px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad1 {
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
}
.ad2 {
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
}
.ad3 {
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
}

Answer 2

那是jQuery相当于封面代码:

 $.each( jQuery('.carousel .item'), function( i, val ) {
    $(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden');
  });

它需要图像源并传入项目然后隐藏实际图像.

此外,您可能需要隐藏轮播,直到jQuery.each完成.我建议做可见性:隐藏黑客攻击CSS级别的图像.因此用户不会注意到大屏幕上的图像放大.