CSS 将“background-size:cover”应用于 Twitter Bootstrap Carousel 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13651515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply "background-size:cover" to Twitter Bootstrap Carousel slides
提问by Betafresh Media
I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image responded to different browser widths. Depending on the width of my image, I could get the important section of the image to always stay visibile and centered, while the extra width on either side was only visible on widescreen monitors as an added effect.
我正在使用带有三张幻灯片的基本 Bootstrap Carousel。在实现滑块之前，我通过其各自 div 的 css background-image 获得了一个静态图像。在我的 CSS 中，我使用了 background-size:cover，并且非常喜欢图像响应不同浏览器宽度的方式。根据我的图像的宽度，我可以让图像的重要部分始终保持可见并居中，而两侧的额外宽度仅在宽屏显示器上作为附加效果可见。
I want to retain that same image behavior now that I'm using Bootstrap's Carousel, but even if I assign dimensions to the slide's viewport, I still can't get my background images to show up. I currently have it set up so each slide displays a separate css class, and each one has a different background image so it can scroll between three images.
现在我想保留相同的图像行为，因为我正在使用 Bootstrap 的 Carousel，但即使我为幻灯片的视口分配了尺寸，我仍然无法显示我的背景图像。我目前已将其设置为每张幻灯片显示一个单独的 css 类，并且每个幻灯片都有不同的背景图像，因此它可以在三个图像之间滚动。
If this is not possible via background-image, it there another way to manipulate image elements so their display behavior is the same as background-size:cover?
如果这无法通过 background-image 实现，那么还有另一种方法来操作图像元素，使其显示行为与 background-size:cover 相同？
Here's my HTML:
这是我的 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>
And my CSS:
还有我的 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;
}
Hopefully this isn't a stupid question and we can figure this out!
希望这不是一个愚蠢的问题，我们可以解决这个问题！
回答by Ana Mendoza
I know my response is quite late, but I just found your question through a search to do something similar. First of all, you need to remove the images from the HTML and change a bit the CSS to apply the height to all divs with class "item" inside the carousel.
我知道我的回复已经很晚了，但我刚刚通过搜索找到了你的问题来做类似的事情。首先，您需要从 HTML 中删除图像并稍微更改 CSS 以将高度应用于轮播内具有“item”类的所有 div。
Applying my modifications to your code it should be something like this:
将我的修改应用于您的代码应该是这样的：
<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>
And the CSS:
和 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;
}
回答by tolginho
That's jQuery equivalent of the cover code:
这是封面代码的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');
});
It takes image source and passes into item and then hides actual image.
它获取图像源并传递给项目，然后隐藏实际图像。
Additionally you may need to hide carousel until jQuery.each completes. I suggest to do visibility:hidden hack for images on CSS level. So users won't be noticed image enlargement on bigger screens.
此外，您可能需要隐藏轮播直到 jQuery.each 完成。我建议对 CSS 级别的图像进行可见性：隐藏 hack。因此用户不会注意到更大屏幕上的图像放大。
回答by bluedot
Just found this codepen https://codepen.io/wisnust10/pen/mPJwWv/which uses another solution. (see css)
刚刚找到这个 使用另一种解决方案的代码笔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;
}
Tested this in chrome and IE and it does the trick.
在 chrome 和 IE 中对此进行了测试，它可以解决问题。
Hope it can help somehow.
希望它能以某种方式提供帮助。
回答by antelove
Using "background property" in ".item" class and "img" tags is not used
在“.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>