自分のサイトのトップページで、今まで作った同人誌の書影を表示している。これらの書影は縦横比が一定でなく、縦長・横長のものが入り混じっているから、等間隔に並べてもイマイチ揃っているように見えず頭を悩ませていた。
一般的には画像の並べ方って、
- Masonry っぽいレイアウトにする
- かつて縦揃えがメジャーだったけど横揃え（名前あるんかな）も普及しているという認識
- 正方形にトリミングする
- iOSの写真アプリがこれ
- 横位置の画像を90度回転する
- 以前自サイトでやっていたけど変だし首が疲れる
などがある。しかし Masonry ほど大げさな実装にしたくないし、書影をトリミングしたり回転するのもおかしい。
ということで、自分のサイトではこのような表示にした。
ここから実物を見られる。
実装としては、まず img {max-width: 85%; max-height: 85%;} で画像の長辺サイズを指定する。その親を flexbox にしたうえで、画像を左右垂直中央に配置されるようにする。最後に背景色や書影のシャドウ（書影だけに）を足してやれば完成。
書影ってただ置くだけだとイマイチで、ある程度のマージンを設けるとより本らしく見える。そのマージンにグレーの背景色を設けることで正方形のシルエットを保ちつついろんな縦横比の画像を配置できるようにした。
ちなみにIE11で見たら横位置の書影が怪しい表示になっていた。致命的じゃないので放置している…。
