私のサイトには、高さが同じで幅が 3 つ異なる複数の画像があります。そして、これらを素敵なグリッドで表示したいと思います。画像がアップロードされると、画像の幅が広いか高いかを確認します。
次に、画像s、m、lの3つの異なるサイズがあります
s は背の高い画像の場合、m & l は幅の広い画像の場合です。
これらの画像は、小 (s) 画像が 1 スポット、中 (m) が 2 スポット、大 (l) が 3 スポットを占める表に表示されます。また、1 行に 3 つのスポットがあります。
おそらく 8 つの画像 (縦 4 つ、横 4 つ) がある場合、次のように表示します (w = 空白):
sss
ms
l
l
l
それ以外の
sss
sww
l
l
l
l
これは、最初の 3 つの画像が小さな画像であることを意味します。2 番目の行には中程度の画像が必要なので、幅の広い画像の 1 つを伸ばして 2 つのスポットを占めます。次に、その横に背の高い画像があり、最後の 3 行は、各行に 1 つずつ、3 つの幅の画像です。
これを十分に説明したことを願っています。
編集：
または、高さが 2 つ、幅が 2 つの 4 つの画像があるとします ( w = white-space )。
このように表示する代わりに
ssw
l
l
私はそれを次のようにしたい：
sm (or ms)
sm (or ms)
どうすればこれを機能させることができますか?