PROJECTSの一覧サムネ

横長と縦長の画像があるので、サムネイル画像の置き方は考えたいところです。

⓪縦長画像は左右に黒い余白をつける（旧サイト方式）

画像を加工しなくてはいけません

①画像エリアの大きさを均一に、上下左右にできる余白は黒で

画像は加工せず、CSSで上下左右に黒余白を（バラバラでダメ）

②画像を同じ形にトリミングする

ぱっと見はキレイ、けど縦長画像のトリミングが嫌

③トリミングの縦横比を「正方形」に ←今イチオシ！

縦長も横長もそれなりに見えます
ex.小川重雄写真事務所

④Flickrぽいかんじ

(スマホは１枚縦積み)

⑤Flickrぽいかんじ/幅いっぱい

(スマホは１枚縦積み)

PROJECTS個別詳細ページのメイン写真

大きさ、縦横比率など、考えたい

• 大画面の場合どうするか　⇒　比率固定でそのまま大きくすると巨大になる