twitter-bootstrap 带有覆盖响应图像的 Twitter Bootstrap Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15055025/
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 Carousel with overlaying responsive image
提问by nubje
I'm trying to find a way to have a "responsive" image overlay the carousel from Twitter bootstrap.
我正在尝试找到一种方法，让 Twitter 引导程序中的“响应式”图像覆盖轮播。
I found How do i add a mask on top of a bootstrap element?which helped me with the overlay - but when I add the image to that div, it doesn't resize like the carousel.
我发现如何在引导元素顶部添加蒙版？这帮助我进行了叠加 - 但是当我将图像添加到该 div 时，它不会像轮播一样调整大小。
From what I've read images in the bootstrap have max-width:100%- does that mean have to set a width for the overlay div?
从我在引导程序中读取的图像来看max-width:100%- 这是否意味着必须为叠加 div 设置宽度？
Fiddle: http://jsfiddle.net/CF8m8/- change the width of the result window to see what I mean.
小提琴：http: //jsfiddle.net/CF8m8/- 更改结果窗口的宽度以了解我的意思。
Thankful for all help.
感谢所有的帮助。
回答by Shail
YOu can do the following : Jsfiddle Jsfiddle with resized overlay
您可以执行以下操作： Jsfiddle Jsfiddle with resized overlay
Jsfiddle in browsercheck in browser
Edit: I would suggest you to use different sizes of images to cater different screen , that way you wont loose the quality and even the ratio can be fixed according to your choice . Than load those images with media queries , so with every different screen you are serving them resized image which will fit well on to your carousal .
编辑：我建议您使用不同尺寸的图像来满足不同的屏幕，这样您就不会失去质量，甚至可以根据您的选择固定比例。与使用媒体查询加载这些图像相比，您可以在每个不同的屏幕上为它们提供调整大小的图像，这将非常适合您的旋转。
<div class="container">
<div class="carousel slide">
<div class="carousel-inner">
<div class="overlay"></div>
<div class="item active">
<a href=""><img src="http://www.placehold.it/900x500&text=One" /></a>
</div>
<div class="item">
<a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a>
</div>
<div class="item">
<a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a>
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev">?</a>
<a class="carousel-control right" href=".carousel" data-slide="next">?</a>
</div>
</div>
In css use the following :
在 css 中使用以下内容：
.overlay {
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
@media (min-width: 768px) and (max-width: 979px) {
.overlay{
width:50%;
height:50%;
}
}
@media (max-width: 767px) {
.overlay{
width:50%;
height:50%;
}
}
@media (max-width: 480px) {
.overlay{
width:50%;
height:50%;
}
}
回答by Philip Kurian
I think there is a better solution. @Shail. I will use your example itself.
我认为有更好的解决方案。@谢尔。我将使用你的例子本身。
Add an image like I shown below to the div=overlay and add the class "image-responsive". Then bootstrap will take care of the rest.
将如下所示的图像添加到 div=overlay 并添加“图像响应”类。然后 bootstrap 会处理剩下的事情。
<div class="overlay">
<img src="images/slideshowfx.png" class="image-responsive"/>
</div>
I used the size width="1200px" and height="300px(or whatever height you want)"
我使用了尺寸 width="1200px" 和 height="300px（或任何你想要的高度）"
After removing the unnecessary styles, the CSS would be like this.
去掉不必要的样式后，CSS 就是这个样子。
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
This is all that you need to do. You can eliminate all the other unnecessary CSS styles.
这就是您需要做的全部。您可以消除所有其他不必要的 CSS 样式。
回答by Brandon Gibbs
The best bet to get your image to resize without media queries is going to be to give your image a class of "img-responsive".
让你的图像在没有媒体查询的情况下调整大小的最好办法是给你的图像一个“img-responsive”类。
Bootstrap has already built the necessary media queries and will scale your image down to scale. Remember to not have a fixed height to the container that the image is in, or the scale down will only affect the width, as your fixed height will likely override any previous css for scaling the height.
Bootstrap 已经构建了必要的媒体查询，并将按比例缩小您的图像。请记住，图像所在的容器没有固定的高度，否则缩小只会影响宽度，因为您的固定高度可能会覆盖任何先前用于缩放高度的 css。
As for the overlay part...that has been sufficiently answered above.
至于覆盖部分……上面已经充分回答了。
