2

過去にかなりの数のレスポンシブ サイトを完成させましたが、このシナリオに苦労しています。

この効果を生成したい: http://playwp.equiet.sk/

画像 div の 1 つに対して、私が行ったことの jsfiddle を作成しました。オーバーレイで適切に機能させることができず、誰かがこれを理解するのを手伝ってくれることを望んでいたので、追加したレスポンシブの側面を取り除きました。

これが私のjsfiddleです 。

<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 に答える