具有覆盖响应图像的 Twitter Bootstrap 轮播答案

【问题标题】：Twitter Bootstrap Carousel with overlaying responsive image具有覆盖响应图像的 Twitter Bootstrap 轮播
【发布时间】：2013-02-24 18:27:47
【问题描述】：

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

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

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

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

感谢大家的帮助。

【问题讨论】：

您是否希望叠加层也调整大小？
@Shail：感谢您的回复。嗯，是的，我想调整叠加层内的图像大小很好，所以它适合“内部”轮播。

标签： twitter-bootstrap overlay responsive-design carousel

【解决方案1】：

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

浏览器中的Jsfiddlecheck in browser

编辑：我建议您使用不同尺寸的图像来适应不同的屏幕，这样您就不会失去质量，甚至可以根据您的选择固定比例。比使用媒体查询加载这些图像，因此对于每个不同的屏幕，您都可以为它们提供调整大小的图像，这将非常适合您的 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>

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

  }
}

【讨论】：

谢谢！这就是我所追求的，但有没有办法让它调整图像大小，保持纵横比，而不是剪裁它？这是一个徽标 - 不知道调整它的大小是否是最佳做法 - 也许我最好创建新版本的图像。
它被剪裁了，因为我们将其调整到异常水平，优化后的图像会表现得更正确。我已经向你展示了如何做到这一点。您可以做的另一件事是创建不同尺寸的图像以服务于不同的屏幕尺寸，然后将它们插入我上面写的查询中，这样可以控制尺寸和质量。如果您需要更多帮助，请告诉我
“优化图像”是什么意思？根据我的尝试，轮播会调整大小而不是剪裁，所以如果叠加层可以表现相同，那将是完美的。我也尝试了不同大小的图像，但是有很多媒体查询要做:)
我已经更新了答案。顺便说一句，我的意思是优化，您可以使用 Photoshop 并创建 3 个不同版本的徽标，调整大小和修改以适应屏幕尺寸。
@Shail 嘿，如何使图像动态变化？如何通过javascript设置图像叠加？

【解决方案2】：

我认为有更好的解决方案。 @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 样式。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：