Question

我正试图找到一种方法让“响应”图像覆盖来自Twitter bootstrap的轮播。

我发现How do i add a mask on top of a bootstrap element?帮助我进行叠加 - 但是当我将图像添加到该div时，它不会像旋转木马那样调整大小。

从我读过的引导程序中的图像max-width:100% - 这是否意味着必须为叠加div设置宽度？

小提琴：http://jsfiddle.net/CF8m8/ - 更改结果窗口的宽度以查看我的意思。

感谢所有人的帮助。

Answer 1

你可以做到以下几点：Jsfiddle Jsfiddle with resized overlay

浏览器中的Jsfiddle check in browser

编辑：我建议您使用不同尺寸的图像来迎合不同的屏幕，这样您就不会失去质量，甚至可以根据您的选择修复比例。比使用媒体查询加载这些图像，因此在每个不同的屏幕上，您都可以为它们提供调整后的图像，这将非常适合您的转盘。

<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>

在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%;

  }
}

Answer 2

我认为有更好的解决方案。 @Shail。我将使用你的例子。

将如下所示的图像添加到div = overlay并添加“图像响应”类。然后bootstrap会处理剩下的事情。

<div class="overlay">
<img src="images/slideshowfx.png" class="image-responsive"/>
</div>

我使用尺寸宽度=“1200px”和身高=“300px（或任何你想要的高度）”

删除不必要的样式后，CSS会是这样的。

.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

这就是你需要做的一切。您可以消除所有其他不必要的CSS样式。

Answer 3

让您的图片在没有媒体查询的情况下调整大小的最佳选择是为您的图像提供一组＆＃34; img-responsive＆＃34;。

Bootstrap已经构建了必要的媒体查询，并将按比例缩放图像。请记住，图像所在的容器没有固定的高度，或者缩小比例只会影响宽度，因为固定高度可能会覆盖任何先前用于缩放高度的css。

至于上面已经充分回答的覆盖部分......

Twitter Bootstrap Carousel具有覆盖响应式图像

3 个答案: