今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。
スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮することを前提として組まなくてはいけないので要注意です。
最適解があるわけではないですが、一応オススメの設定などを。
一般的には
- 縦横の伸縮をしない
- 画像の中心とブラウザの中心が一致
などが求められる仕様かなと思います。
ソースは↓です。
https://github.com/umanari145/css/blob/master/main_visual.html
気をつけるべきポイント
背景画像で使う場合
- background-size:coverでほぼ決まり。高さが動的に変えていい場合はbackground-size:100% 100%
- coverを使う場合はbackground-position:center centerにする。要はどこが基準になるのか。大きい画像を小さい領域に入れようとするとよくわかる。パラメーターいじって実験。
- スクロールしても背景が固定の場合は、background-attachment: fixed;を使う。positionに関してはcenter center(真ん中を中心にする)が一般的。領域を狭くして、top rightなどとすると違いがわかる(詳しくはソース参照)。
imgタグで使う場合
- position:abosoluteでtop,left50%にし、ネガティブマージンかtranslateで画像分中央に移動させる。
ソースのようにサンプルを色々動かすのがいいでしょう。
