縦横比が変わる親要素の中で、背景画像をうまいこと見せる方法ですよね?
トリミングとサイズの異なる画像をいくつも作るのは手間がかかりすぎるので、
PC向けの最も大きなサイズの背景画像を用意しておき、
CSS
1.bg {
2 background-image: url(img/bg_sample.jpg);
3 background-position: center top;
4 background-repeat: no-repeat;
5 -webkit-background-size: cover;
6 background-size: cover;
7}
としておけば、あとは勝手に親要素の縦横比に合わせて自動フィットしてくれますよ。
background-size: coverの場合は
親要素のアスペクト比に合わせて画像の長辺・短辺どちらかが親要素のwidth / heightの
サイズになるように自動的に拡大してくれます。(親要素全てを背景画像で覆い尽くす状態)
その際、用意している画像の縦横比は変えませんので、親要素のアスペクト比と背景画像の
アスペクト比が異なる場合には長辺・短辺のどちらかがトリミング(というか要素内に表示できず非表示に)されて見えなくなります。
基本的にはこの仕組を使ってレスポンシブ背景のほとんどは作られてます。
背景画像のどのあたりがトリミングされて見えなくなるかは状況によって変わるので、
あくまで装飾的に画像のどこかがカットされても大丈夫な素材を選ぶのがコツです。
あまりガチガチに「この比率の時にはこのトリミングとこの大きさで厳密に見せたい!」とか
欲張るとうまくいかないです。
そこをこだわりたいのであれば、それこそアスペクト比ごとに複数の背景画像を用意して、
ブレイクポイントで使用する背景画像を使い分けるしか今のところはないでしょうね。
あと、わりと同じような質問を何度もされていますが、
Chromeのデベロッパーツールなどで実際にどの要素にどんなCSSが適用されているのか
調べたりしてますか?
参考サイトを見つけることはできているのですから、そのサイトが実際に
どう作られているのかを研究するのも勉強になりますよ。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/09/20 09:26