twitter-bootstrap 如何在 Bootstrap - Carousel 中将图像缩放到全高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14119577/
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
How to make the image scale to full height in Bootstrap - Carousel?
提问by Gattoo
I am trying to show an image that should fill up the entire screen in Bootstrap Carousel control. I am using an image with 1024px*795px
我试图在 Bootstrap Carousel 控件中显示一个应该填满整个屏幕的图像。我正在使用 1024px*795px 的图像
I am using the example given on Bootstrap site with full size image. Horizontally, it fills up the screen very well. But vertically it does not scale well. What properties should I add / delete so that the images fill up the entire screen, though they have smaller pixel sizes?
我正在使用 Bootstrap 站点上给出的带有全尺寸图像的示例。在水平方向上，它很好地填满了屏幕。但在垂直方向上它不能很好地扩展。我应该添加/删除哪些属性以使图像填满整个屏幕，尽管它们的像素尺寸较小？
How can I do it in responsive designs as well, so that the images scale any size?
我怎样才能在响应式设计中做到这一点，以便图像缩放任何大小？
I am using the css as it is on the example site and only changing CSS in carousel.html.
我正在使用示例站点上的 css，并且只更改 carousel.html 中的 CSS。
回答by Zim
2019 Updated Answer for Bootstrap 4.x
2019 年 Bootstrap 4.x 的更新答案
Since modern browsers now support object-fit, there are better options as explained here.
由于现代浏览器现在支持object-fit，这里有更好的选择。
Original Answer for Bootstrap 3.x
Bootstrap 3.x 的原始答案
I realize this answer is a little late, but I also faced a similar challenge with the Bootstrap carousel. In order for the 100% height to work, the carousel and any of its' parent containers must also be 100% height.
我意识到这个答案有点晚了，但我也面临与 Bootstrap 轮播类似的挑战。为了让 100% 的高度起作用，carousel 和它的任何父容器也必须是 100% 的高度。
I added some overrides to the Bootstrap CSS classes:
我向 Bootstrap CSS 类添加了一些覆盖：
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}
And then add the "fill" class accordingly to your carousel:
然后相应地向您的轮播添加“填充”类：
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');">
<div class="container">
<h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1>
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700');">
<div class="container">
<h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1>
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">?</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">?</a>
</div>
</div>
</div>
Here is a working example: http://bootply.com/59900
这是一个工作示例：http: //bootply.com/59900
