0

画像 5x3 のグリッドを表示する必要があります。このグリッドは、画面の解像度に関係なく、同じ形式とサイズを維持する必要があります。画像自体は、それに応じてサイズ変更されます。

次のようなインラインブロックに表示される画像のリストがあります。

<div class="gridView">
  <ul>
    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>

    <li>
      <img src="">
    </li>
  </ul>
</div>

CSS は次のようになります。

.gridView {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    text-align: center;
    width: 100%;
}

.gridView ul li {
    height: 100%;
    max-height: 150px;
    max-width: 200px;
    width: 100%;
}

現在、ウィンドウのサイズを変更すると、グリッドのサイズが固定されません。グリッドが同じままで、画像のみがサイズ変更されるようにするにはどうすればよいですか?

4

2 に答える 2

1

次のように、レイアウト構造を同じに保ちたい場合。

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

[x] [x] [x] [x] [x]

その場合、液体グリッドシステムは必要ありませんが、代わりに液体画像が必要になります。私が行うことは次のとおりです。.gridViewulliのスタイルを変更して、最大の高さと幅の代わりに、単純な高さと幅の宣言を設定します。

.gridView ul li {
height: 150px;
width: 200px;
}

次に、画像クラスを追加して、画像をレスポンシブにします。

.img {
max-width: 100%
height: auto;
}

もちろん、画像ファイルのサイズは最大で150pxx200pxである必要があります。

このように、ブラウザの幅が狭くなり、画像がグリッドに合わせて小さくなるときにグリッドが崩壊することはありません。

お役に立てれば！

于 2013-02-11T14:15:43.833 に答える
0

幅：100％; 親要素/ウィンドウを基準にして要素のサイズを常に変更します。固定幅の場合、固定幅が必要です。そのように単純です：

width: 1200px;
于 2013-02-11T14:13:52.083 に答える