2

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

我想产生这种效果： 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/

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

提前致谢。

4

2 回答 2

2

您应该使用媒体查询和百分比宽度..

这样，您可以在媒体查询中通过指定子元素的宽度（以完美加起来为 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 列。

于 2013-01-17T12:35:55.487 回答
0

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

http://dabblet.com/gist/2778608

这应该会有所帮助。我不确定如何将悬停与此集成。让我知道你是否知道。

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

http://foundation.zurb.com

于 2013-01-17T11:51:11.720 回答