css - 将“background-size:cover”应用于 Twitter Bootstrap Carousel 幻灯片

Question

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

现在我正在使用 Bootstrap 的 Carousel，我想保留相同的图像行为，但即使我为幻灯片的视口分配了尺寸，我仍然无法显示我的背景图像。我目前已经设置好了，因此每张幻灯片都显示一个单独的 css 类，并且每张幻灯片都有不同的背景图像，因此它可以在三个图像之间滚动。

如果通过背景图像无法做到这一点，那么还有另一种方法来操作图像元素，使其显示行为与背景大小相同：封面？

这是我的 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 级别的图像进行可见性：隐藏 hack。因此用户不会在更大的屏幕上注意到图像放大。

Answer 3

刚刚发现这个使用另一种解决方案的codepen https://codepen.io/wisnust10/pen/mPJwWv/ 。（见CSS）

.item:nth-child(1) {
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }

在 chrome 和 IE 中对此进行了测试，它成功了。

希望它可以以某种方式提供帮助。

Answer 4

在“.item”类中使用“背景属性”，不使用“img”标签

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}

.item {
    width: 100%;
    height: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center;
}
/*
img {                
    object-fit: cover;
}
*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div id="myCarousel" class="carousel slide">

    <!-- Carousel items -->
    <div class="carousel-inner">
    
        <div class="item active" style="background-image: url(https://dummyimage.com/300x200/000/fff)" >
<!--            <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/1200x800/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
        </div>
        
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

密码笔

编辑

全视图

img 的版本