1

我正在尝试找到一种方法，让“响应式”图像覆盖来自 Twitter 引导程序的轮播。

我发现如何在引导元素之上添加掩码？这有助于我进行叠加 - 但是当我将图像添加到该 div 时，它不会像轮播一样调整大小。

从我在引导程序中读取的图像来看max-width:100%- 这是否意味着必须为覆盖 div 设置宽度？

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

感谢所有帮助。

4

3 回答 3

4

我认为有更好的解决方案。@Shail。我将使用您的示例本身。

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

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

我使用了尺寸 width="1200px" 和 height="300px（或任何你想要的高度）"

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

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

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

于 2013-08-05T03:06:36.200 回答
4

您可以执行以下操作： Jsfiddle Jsfiddle with resized overlay

浏览器中的Jsfiddle检查浏览器

编辑：我建议你使用不同尺寸的图像来适应不同的屏幕，这样你就不会失去质量，甚至比例可以根据你的选择来固定。比使用媒体查询加载这些图像，因此对于每个不同的屏幕，您都可以为它们提供调整大小的图像，这将非常适合您的 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">‹&lt;/a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›&lt;/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%;

  }
}
于 2013-02-25T08:03:06.480 回答
1

让您的图像在没有媒体查询的情况下调整大小的最佳选择是为您的图像提供一类“img-responsive”。

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

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

于 2015-10-01T22:44:06.720 回答