twitter-bootstrap Twitter Bootstrap：拥有全宽和全高的轮播图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16015869/
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
Twitter Bootstrap: Have carousel images full width and height
提问by Lasse
this seems as a trivial question but after a couple of hours fiddling with the Twitter Bootstrap carousel in their example (http://twitter.github.io/bootstrap/examples/carousel.html) I resort to SO for some help.
这似乎是一个微不足道的问题，但是在他们的示例（http://twitter.github.io/bootstrap/examples/carousel.html）中摆弄 Twitter Bootstrap carousel 几个小时后，我求助于 SO 寻求帮助。
I want the carousel to display the full width (as now) but not with a cropped height. I have tried setting min-height, height etc. to 100% in different containers but with no result. Any two cents?
我希望轮播显示全宽（像现在一样）但不是裁剪高度。我尝试在不同的容器中将最小高度、高度等设置为 100%，但没有结果。有两分钱吗？
回答by Nate Beers
For Bootstrap 3, all you need is:
对于 Bootstrap 3，您只需要：
.carousel img {
min-width: 100%;
}
回答by Julian Soro
From the example carousel on the bootstrap site, if you resize the browser window you'll see that the image is actually being stretched in the x-axis. To accomplish the same effect, use their CSS:
从引导站点上的示例轮播中，如果您调整浏览器窗口的大小，您将看到图像实际上是在 x 轴上拉伸的。要实现相同的效果，请使用它们的 CSS：
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
The last two attributes, min-width and height, are of importance. The height is set to the desired size of the carousel.
最后两个属性 min-width 和 height 很重要。高度设置为所需的旋转木马尺寸。
Finally, you will want to use img tags to place your image, rather than a background-image. Here's a fuller example:
最后，您将需要使用 img 标签来放置图像，而不是背景图像。这是一个更完整的示例：
<div class="item">
<img src="image.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Header</h1>
<p class="lead">This is a caption</p>
<a class="btn btn-large btn-primary" href="#">Large Button</a>
</div>
</div>
</div>
I hope this helps. Cheers!
我希望这有帮助。干杯!
回答by Kerry Smyth
Think I have got a solution with simple CSS changes? Just change the following from (OLD) to;
认为我有一个简单的 CSS 更改的解决方案？只需将以下内容从 (OLD) 更改为；
.carousel {
/*height: 500px; OLD*/
/*margin-bottom: 60px; OLD*/
/*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
margin:0 auto 60px;
}
.carousel .item {
/*height: 500px; OLD*/
/*background-color: #777; OLD*/
width:100%;
height:auto;
}
.carousel-inner > .item > img {
/*position: absolute; OLD+WHY?*/
/*top: 0; OLD+WHY?*/
/*left: 0; OLD+WHY?*/
min-width:100%;
height:auto;
}
回答by Becky
Use the following for each image you want to insert in the slide:
对要插入幻灯片的每个图像使用以下内容：
<img class="img-responsive center-block" src="#">
回答by skay
Though this dates back 3 years, solution given by 'Nate Beers' solved my problem, when using Bootstrap 3.3.7
虽然这可以追溯到 3 年前，但在使用 Bootstrap 3.3.7 时，“Nate Beers”给出的解决方案解决了我的问题
Its because 'max-width' sets the maximum width of the element which overrides width property when width is greater than max-width.
这是因为 'max-width' 设置了元素的最大宽度，当宽度大于 max-width 时，它会覆盖 width 属性。
Also 'min-width' always overrides the 'max-width'.
此外，'min-width' 总是覆盖 'max-width'。
Here is an examplein codepen, resize the preview window to see how it works.
这是codepen 中的一个示例，调整预览窗口的大小以查看其工作原理。
Check the below element in particular by resizing to the smallest possible width and compare with 2 other elements i1 and i2.
通过调整到尽可能小的宽度并与其他 2 个元素 i1 和 i2 进行比较，特别检查下面的元素。
<div class="i3">Sample</div>
回答by user2998469
You can simply change their css to this but it will cause your image to crop of what doesn't fit:
您可以简单地将他们的 css 更改为此，但它会导致您的图像裁剪不适合的内容：
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 500px; /* <--- Change this line to min-height */
}
