将"background-size:cover“应用于Twitter Bootstrap Carousel幻灯片
将"background-size:cover“应用于Twitter Bootstrap Carousel幻灯片
提问于 2012-12-01 03:07:39
我正在使用一个带有三张幻灯片的基本Bootstrap Carousel。在我实现滑块之前，我有一个通过css背景的静态图像--其各自div的图像。在我的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">‹</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;
}希望这不是一个愚蠢的问题，我们可以解决这个问题！
回答 3
Stack Overflow用户
发布于 2013-02-15 04:28:11
我知道我的回复有点晚了，但我只是通过搜索找到了你的问题，想做一些类似的事情。首先，您需要从HTML中删除图像，并稍微更改CSS，以便将高度应用于carousel中具有"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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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;
}Stack Overflow用户
发布于 2014-01-16 20:43:39
这是封面代码的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');
});它获取图像源并传递给item，然后隐藏实际的图像。
此外，您可能需要隐藏轮播，直到jQuery.each完成。我建议做可见性:隐藏的黑客在CSS级别的图像。因此，用户不会注意到大屏幕上的图像放大。
Stack Overflow用户
发布于 2017-08-23 04:00:21
我刚刚找到了这个使用另一种解决方案的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中进行了测试，它成功了。
希望它能以某种方式提供帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13651515
复制相关文章
相似问题