Html 使图像div'；覆盖物是否完全响应？

我在过去已经完成了相当多的响应网站，但我正在与这个塞纳里奥斗争

我想产生这样的效果：

我已经为其中一个image div创建了一个jsfiddle。我已经剥离了我添加的响应方面，因为我无法让它与覆盖层一起正常工作，希望有人能帮我解决这个问题

这是我的JSFIDLE，我想转为：

萨莉蝾螈

客户经理
.一{
位置：相对位置；
背景色：透明；
}
.二{
位置：相对位置；
顶部：-364px；
左：0px；
}
.info{
位置：相对位置；
顶部：-365px；
填充顶部：30px；
左侧填充：30px；
背景色：透明；
}
.社会{
位置：相对位置；
顶部：-365px；
填充顶部：15px；
左侧填充：30px；
背景色：透明；
}
.name{字体大小：24px；}
.位置{字体大小：16px；}

编辑：好，下面是我的另一个示例（忽略悬停故障）：

块将向左浮动，因此当浏览器变大时，将显示更多块，但当其中间尺寸时，我希望它自动填充浏览器，这样图像右侧就不会有任何空白，所以请将其缩放以适应

---

提前谢谢。

我找到了你的意思：

这应该会有所帮助。我不知道如何将悬停与此集成。如果你知道了，请告诉我

另外，尝试使用响应性框架来节省时间：

您应该使用和百分比宽度

这样，您就可以通过指定子元素的宽度（百分比加起来完全等于100%），并通过使图像在这些元素中成为

width:100%

来定义所需的列数

演示在
（全屏显示在）

所以对于一个

<div id="container">
  <div class="item"><img src="http://lorempixel.com/200/150/city/1" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/2" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/3" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/4" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/5" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/6" /></div>
</div>

---

这意味着当浏览器的宽度达到400px时，使用2列，对于401px和600px之间的宽度，使用4列，对于大于600px的宽度，使用5列。

你说的是响应，但有很多方法可以做到这一点。你想干什么？你想显示或隐藏哪些元素，更小还是更大？你想让图像像屏幕一样缩放吗？是的，我在上面发送了一个链接，将其应用到主题中。我希望它总是填满屏幕，但每个元素的最小宽度为540px。因此，如果您的屏幕宽度为1440px，那么它将只显示两个宽度，但div/图像的大小缩放比例将增加，以填充浏览器窗口。我已经设法让他们做出反应，但实际上并没有扩大规模。我将快速创建一个html页面作为示例。抱歉，这是漫长的一天。好的，这里有一个例子，我的意思是：它们将浮动到左边，这样当你的浏览器变大时，会显示更多的块，但当它们的中间大小时，我希望它自动填充浏览器，这样图像的右边就不会有任何空白，我确实使用Zurb我唯一的问题是覆盖，我可以得到简单的图像来做这件事没有问题，你的例子也没有图像作为网格（并排）填充屏幕。谢谢。是的，谢谢，但这并不能解决我隐藏的div/overlay的问题，我可以让图像来做这件事。没问题，但当我有了overlay时，它就不能正常工作了，就像我问题中的JSFIDLE示例一样。让我知道你是否可以在你的例子中引入覆盖，我就被卖了。@matt，如果你把我例子中的

.item

设为

位置：相对的

，你可以在里面添加另一个div，即

位置：绝对的

，上/左/右/下为0，这样它就填满了它的容器，在里面你可以放上标题。。请参见和（我使用了一些转换来展示一些效果，但我只包括了标准语法..您可能希望添加特定于供应商的前缀，以使其在浏览器中工作..）非常感谢，但我的问题是我希望覆盖是另一个图像，或者从灰度到彩色…即使在第二个分区中有另一个图像，这仍然有效吗？编辑：我想我在这里得到了它：（它只在第一个图像上）

<div id="container">
  <div class="item"><img src="http://lorempixel.com/200/150/city/1" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/2" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/3" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/4" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/5" /></div>
  <div class="item"><img src="http://lorempixel.com/200/150/city/6" /></div>
</div>

#container{
    overflow:auto;
}
#container > div{
    float:left;
}
#container > div > img{
    width:100%;
    display:block;
}

@media screen and (max-width:400px){
  #container > div{
    width:50%;
  }
}
@media screen and (min-width:401px) and (max-width:600px){
  #container > div{
    width:25%;
  }
}
@media screen and (min-width:601px){
  #container > div{
    width:20%;
  }
}