使带有叠加层的图像 div 完全响应？

Question

过去我已经完成了很多响应式网站，但我一直在努力解决这个问题。

我想产生这种效果： http://playwp.equiet.sk/

我为其中一个图像 div 创建了一个我所做的 jsfiddle。我已经删除了我添加的响应方面，因为我无法让它与叠加层一起正常运行，并希望有人可以帮助我解决这个问题。

这是我想要响应的 jsfiddle： http://jsfiddle.net/mattmagi/ZS7ZA/1/

<div class="one">
  <img src="http://tst.eclipsecreative.ca/3clips3/wp-content/uploads/2013/01/team.jpg"/>
    <div class="two">
      <img src="http://tst.eclipsecreative.ca/3clips3/wp-content/uploads/2013/01/team-hover.jpg"/>
      <div class="info">
        <p class="name">Sally Salamander</p>
        <p class="position">Account Manager</p>
      </div>
      <div class="social">
        <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a> <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a> <a href="#"><img src="http://www.tompeters.com/_/i/twitter-icon.png" /></a>
      </div>
  </div>
</div>


.one {
    position: relative;
    background-color: transparent;
}
.two {
    position: relative;
    top: -364px;
    left: 0px;
}
.info {
position: relative;
top: -365px;
padding-top: 30px;
padding-left: 30px;
background-color: transparent;
}
.social {
position: relative;
top: -365px;
padding-top: 15px;
padding-left: 30px;
background-color: transparent;
}
.name {font-size: 24px;}
.position {font-size: 16px;}

编辑：好的，这是我的意思的另一个例子（忽略悬停故障）： http://jsfiddle.net/mattmagi/3d5Jr/

这些块将浮动到左侧，因此当您的浏览器变大时会显示更多块，但是当它介于中间大小时，我希望它自动填充浏览器，因此图像右侧永远不会有任何空白，所以让它缩放以适应。

提前致谢。

Answer 1

您应该使用media queries 和百分比宽度..

这样，您可以在媒体查询中通过指定子元素的宽度（以完美加起来为 100% 的百分比）来定义所需的列数，并使图像成为width:100% 在这些元素中，您可以使它们自动缩放..

演示地址 http://jsfiddle.net/gaby/Yz7mf/1/
（全屏http://fiddle.jshell.net/gaby/Yz7mf/1/show/light/）

所以对于一个结构来说

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

你可以使用一个 CSS

#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%;
  }
}

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

Answer 2

我找到了这个例子来说明你的意思：

http://dabblet.com/gist/2778608

这应该会有所帮助。我不确定如何将悬停与此集成。如果你弄清楚了，请告诉我。

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

http://foundation.zurb.com