SANOGRAPHIX BLOG

京都を拠点に活動する佐野章核 (sanographix) の個人ブログ。日記、webデザイン、読書、写真など。

縦横比が入り乱れてる書影のレイアウト

自分のサイトのトップページで、今まで作った同人誌の書影を表示している。これらの書影は縦横比が一定でなく、縦長・横長のものが入り混じっているから、等間隔に並べてもイマイチ揃っているように見えず頭を悩ませていた。

一般的には画像の並べ方って、

  • Masonry っぽいレイアウトにする
    • かつて縦揃えがメジャーだったけど横揃え(名前あるんかな)も普及しているという認識
  • 正方形にトリミングする
    • iOSの写真アプリがこれ
  • 横位置の画像を90度回転する
    • 以前自サイトでやっていたけど変だし首が疲れる

などがある。しかし Masonry ほど大げさな実装にしたくないし、書影をトリミングしたり回転するのもおかしい。

ということで、自分のサイトではこのような表示にした。

f:id:sngrpx:20180518164332j:plain

ここから実物を見られる。

sanographix.net

実装としては、まず img {max-width: 85%; max-height: 85%;} で画像の長辺サイズを指定する。その親を flexbox にしたうえで、画像を左右垂直中央に配置されるようにする。最後に背景色や書影のシャドウ(書影だけに)を足してやれば完成。

書影ってただ置くだけだとイマイチで、ある程度のマージンを設けるとより本らしく見える。そのマージンにグレーの背景色を設けることで正方形のシルエットを保ちつついろんな縦横比の画像を配置できるようにした。

ちなみにIE11で見たら横位置の書影が怪しい表示になっていた。致命的じゃないので放置している…。

Special Offer

既刊まとめて25%オフ

所属サークルの同人誌5冊をセットにした、お得なバンドル。

BOOTHで購入する STORES.jpで購入する