2

メディアクエリを使用して画像の列数を変更する画像の全幅グリッドを作成しています。ここで動作するデモを見ることができます: http://vitaminjdesign.com/grid/

画像を使用img{max-width: 100%}すると、コンテナの幅まで伸びます。これはうまく機能し、デモは機能しています。ご覧のとおり、各画像の間には 1 ピクセルのスペースが必要です。ボーダーボックス モデルを使用しているため、スペースは padding-right を使用して作成されます。

しかし、ウィンドウのサイズを変更すると、画像間の 1 ピクセルの余白が時々変化し、画像の間/下の空白の量が一貫していないように見えることに気付くでしょう。

各画像を検査すると、ブラウザーは画像をわずかに異なるサイズ (1 ピクセルの違いですが、それ以上ではありません) でレンダリングしています。これにより、これらの不均一な線が作成されます。問題は、すべての画像がまったく同じサイズである場合、それらがわずかに異なるサイズでどのようにレンダリングされるかです (これがこのレイアウトの問題を引き起こします)。各画像を調べると、サイズが異なる場合と同じ場合があることがわかります (画面の幅によって異なります)。

CSS 以下:

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #work{width:100%; clear:left;}
    #work li{width:20%; height:auto; padding-right: 1px;  padding-bottom: 1px; float:left; position: relative;  transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
    #work li a{display: block; position: relative; width: 100%; height: auto;}
    #work li img{display: block; max-width: 100%; height: auto; }

ここではメディア クエリを一覧表示しませんが、リスト アイテムの幅を変更するだけです。

なぜこれが起こっているのか、どうすれば修正できるのかについて何か考えはありますか?

4

3 に答える 3

0

問題は、各リスト項目に計算された幅があるためです。最後の列を除くすべての列にはパディング右/ボーダー右があるため、実際には幅が異なり、画像の幅/高さが異なります。列の最後の項目のゼロ パディング/境界線のルールを削除することで、すべての画像の幅と高さがまったく同じになります。

于 2012-12-07T19:28:44.740 に答える
0

問題は、メディアクエリと nth-child セレクタにあります。border-right: none;しかし、設定がグリッドの高さを1px追加する理由がよくわかりません。この問題を解決するには、border-right: none;このセレクター内を削除するだけです。

#work li:nth-child(3n+3) {
   border-right: none; //Delete this
}


#work li:nth-child(2n+2) {
   border-right: none; //Delete this
}
于 2012-12-07T19:40:37.893 に答える
0

* セレクターのマージン属性を削除すると、問題が解決します。

* {
  -moz-box-sizing: border-box;
  font-weight: normal;
  padding: 0;
}
于 2012-12-07T19:24:38.177 に答える