Q&A
例えば640PXをブレイクポイントとして、背景画像を作った場合、360PXに縮小した際に、画像の縦横比が、変わってしまいますよね。
すると画質が劣化したり、人間の画像なら超縦長の顔になってしまいませんか？
そこは、さすがに仕事であっても、何十個も画像を作れないので、仕方がないとクライアントさんを納得させるのが、現場での一般的な考えでしょうか？
下記サイトの会社情報のように、背景を画像にして、レスポンシブでサイト制作をしたいのですが、
ブラウザの縦横比が、変化してしまう状況で、どのようにして、内容（こちらのサイトなら、COMPANYから株主までの文字）を背景画像の真ん中にして、
内容の上下の余白も空きすぎないようにしているのでしょうか？
恐らく、320、640の時の背景画像をそれぞれ別の比率で作り、バックグラウンドイメージを使ってブレイクポイントで、縦横比の違う画像を切り替えているのだと思うのですが、
それだとブレイクポイントでないブラウザサイズの時に、内容の上下の余白（こちらのサイトなら、COMPANYの上にある余白と株主情報の下にある余白）が、
空きすぎたり、短くなりすぎたりしない物でしょうか？
どのように常に適切な余白を確保しているかわかりますか？
私は問い合わせフォームを内容として使う予定です。
この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。
回答3件
0
縦横比が変わる親要素の中で、背景画像をうまいこと見せる方法ですよね？
トリミングとサイズの異なる画像をいくつも作るのは手間がかかりすぎるので、
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 06:31
総合スコア3763
0
ベストアンサー
細かい調整はいろいろできますが、
html
1<head> 2<style> 3body{ 4background-image:url(); 5background-size:wrap; 6} 7</style> 8</head> 9<body> 10</body>
という便利なコードをcssで使えば上下、左右に常に余白が無いように背景が表示されるようになります。
が、
古い端末ではかなりの確率で使用出来なかったりします。
*このページをよく見ています。http://allabout.co.jp/gm/gc/400630/
↑の方法でも古い端末ではかなりの確率で使用出来なかったりします。
どうしてもというときは、
javascriptで無理矢理再現してみたり、
html
1<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js">
これ使ってみてもよいと思います。
投稿2015/09/19 23:22
総合スコア67
別にイチイチ画像用意しなくても問題ないと思いますが．．．
画質の劣化は拡大し過ぎないかぎりないだろうし、
画像の縦横の比率は維持されるものなので問題ないかと．．．
0
細かい調整はいろいろできますが、
background-size:wrap;
という便利なコードをcssで使えば上下、左右に常に余白が内容に背景が表示されるようになります。
投稿2015/09/19 22:43
総合スコア37
例えば640PXをブレイクポイントとして、背景画像を作った場合、360PXに縮小した際に、画像の縦横比が、変わってしまいますよね。
すると画質が劣化したり、人間の画像なら超縦長の顔になってしまいませんか？
そこは、さすがに仕事であっても、何十個も画像を作れないので、仕方がないとクライアントさんを納得させるのが、現場での一般的な考えでしょうか？
この便利なコードは縦横比を変えません。なので、縦長になることもありません。使ってみればわかります。
縦横比率を代えないというのはビックリですね。
比率がおかしくなる場合、余白にすることで実現しているのですかね。
いや、余白もできません。っていうか私のこの回答はあなたの選んだベストアンサーが同じだということに気づきませんか？
この質問の投稿者はすでに退会しているため、質問者からの返信やベストアンサーの選定がない点にご留意ください。
あなたの回答
tips
プレビュー
退会済みユーザー
2015/09/20 09:26