html - 使具有覆盖层的图像 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/

这些 block 将向左浮动，因此当您的浏览器变大时，会显示更多 block ，但是当其尺寸介于中间时，我希望它自动填充浏览器，这样图像右侧就不会出现任何空白，所以让它适合。

提前致谢。

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

这意味着当浏览器宽度不超过 400 像素时，使用 2 列，宽度在 401 像素到 600 像素之间时，使用 4 列，宽度大于 600 像素时，使用 5 列。