Question

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

我为其中一个图片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

使用叠加层完全响应图像div？

2 个答案: