Q&A
ブラウザの高さ100%、レイアウトを崩さずに表示させる だとブラウザを縦で見ている人には画像が縦長に表示されるって事でいいですか？ もっと例えるならスマホで横向きで見ている人と縦向きでみている人と縦横比が変わりますが、背景画像はそのデバイスにピッタリ沿うような形で表示れるって事ですか？
レスポンシブサイトを初めて制作しています。
ブラウザ幅を狭めるごとに画像もゆるやかにサイズを拡大縮小したいです。
ゆるやか〜に画像を拡大縮小するにはどのような指定方法が良いでしょうか？
メディアクエリにvhで指定したのですが、縦にブラウザを縮めると、レイアウトがおかしくなったため、
height:300vw;
と、高さをｖｗで調整しています。
ベストな方法は他にありますか？
ーーーーーーーーーーーーーーーーーー
また、トップページの一番最初に見られる背景画像をユーザーの各ブラウザの高さに合わせてちょうど100%で表示したいのですが、100vhで指定すると、やはりブラウザを縦に縮めると全体のレイアウトが崩れてしまいます。
こんな感じで。参考サイト
リンク先のサイトも、縦に縮めるとレイアウトが崩れていますが。。。
縦に崩れてもいいんでしょうか？他にどのような指定方法がありますか？
まとめると、
・画像をゆるやかに拡大縮小させるとき vh vw % px その他 どのように指定されますか？
・トップページ背景画像を、ブラウザの高さ100%、レイアウトを崩さずに表示させるにはどのようにすればよいでしょうか？
よろしくお願いします。
補足
]
左上が元画像だとして、
【デバイス横の場合】
デバイスが小さい場合はそのまま縮小して、大きくなった場合は画質（解像度？）が荒れない程度に拡大表示したい
【デバイス縦の場合】
写っているものが切れてもOK（画像の場合、木が切れている、人間の右側の余白もほぼない）
で、真ん中あたり？に画像が表示されるようにしたい
参考サイトも、縮めると横が切れる。
参考サイト
ちなみに、今のコードは
html
1.top { 2 background-image: url('../images/town_bg.png'); 3 background-repeat: no-repeat; 4 background-position: center center; 5 background-size: cover; 6 background-attachment: fixed; 7 position: relative; 8 width: 100%; 9 padding-bottom:7vh; 10}
で、ブレイクポイントごとに背景画像のサイズを変えています。
1000px以上なら 100vh
800px以上なら 800px
550px以上なら 590px
回答1件
0
可変領域いっぱいに拡がるように画像をゆるやかに拡大縮小する方法
一番簡単なのは、img画像を直接HTMLに埋め込むのではなく、
可変領域の背景画像として表示し、background-size:coverとすることですね。
背景画像なので、用意している画像と実際の表示領域のアスペクト比が違ってしまっていても、
自動的に入りきらない領域はカットされるので特別な処理が必要ありません。
img画像で同じことをやろうと思うと、結構厄介です。。。
画像をゆるやかに拡大縮小させるときの単位
一般的なのは%かと思われます。
vh,vwのように環境を選びませんし、親要素に対する比率となるので細かい調整がしやすいので。
（※作りたいものの仕様によってはvh,vwの方が楽だったりすることもあるかもしれませんが）
###トップページ背景画像を、ブラウザの高さ100%、レイアウトを崩さずに表示させるには?
「レイアウトを崩さずに」というのが何を指しているのかちょっとよく分かりません。
参考サイトの背景動画も、背景動画自体は画面いっぱいにちゃんと表示されていますので、それは「レイアウトが崩れている」には当たりませんよね？
もしかして高さや幅を小さくした際に、「トップ背景画像領域の上に乗っている各種のアイテムが重なったりおかしなところに表示されたりしないように、」という意味でしょうか？
であればそれは背景画像の話ではなく、ボックスの可変レイアウトの手法ということになりますので、
**「適切な比率で各ボックスのサイズや位置を指定してください」**としか言いようがないですね。
###ブラウザの高さ100%になる背景画像領域（メインビジュアル等）
ブラウザ画面サイズが変わっても常にウィンドウ領域全体を画像領域で覆うためのボックスの指定方法は、
やはりheight:100vhが最も簡単です。ただ、vhを理解しない環境もありますので、
そのような環境も含めてサポートしたいとなると、jQueryとかで$(window).height();の値を取ってきて対象領域のheightに動的にセットする処理をしてやらないとダメですね。
ご質問の意図とちょっと違うかもしれませんがそんな感じです。
投稿2016/09/06 19:28
総合スコア3763
1.トップページ背景の画像の拡大、縮小についてはコードを記載しました。おそらく問題ないと思います。
特にお尋ねしたかったのはimg画像です。
今のところブレイクポイントごとにpxで指定しているので、ブレイクポイントまでは画像サイズが固定されています。
1000px-800pxなら 400px で固定
800px-550pxなら 330pxで固定
800pxのブレイクポイントで画像のサイズは変わりますが、800-550の間画像サイズが固定されていて、これをゆるやかにサイズ変更したいです。
vh vwをうま〜く使って出来無いのかな？と思い質問させていただきました。
2. %が良いのですね。
3. 「トップ背景画像領域の上に乗っている各種のアイテムが重なったりおかしなところに表示されたりしないように、」という意味です。
一見ちゃんとしたサイトでも、縦に縮めると参考サイトのように各種アイテムが重なったり、文字がはみ出したり、レイアウトが崩れていることがあるので、そこまでの動きを想定しないほうが良いのかな？と思い質問させていただきました。
レイアウトが崩れないことが大前提だと思いますが、縦に短いデバイスはないのだから？、その動きにまで気を使う必要はなかったりするのかなと。
4.とりあえず100vhで指定しているので問題なさそうですね。
縦に縮めた時にレイアウトが崩れるのが気になりますが、、、
Jqueryに関しても少しずつ取り入れていきたいと思います。
＞１
そういうことでしたら、ゆるやかに拡大縮小させたいメディアクエリの中で、
img{ width: 100%; height: auto; }とすれば親要素の幅に合わせて画像自身の比率を保ったまま拡大縮小するようになりますよ。
ただこれだと常に横幅を親要素に合わせる形での拡大縮小になりますので、
ご希望のように「横長と縦長で見え方を変えたい」という要望には答えられません。
やり方としては
１．トリミングの違う画像を2種類用意してpicture要素で切り替える
２．CSSですごく頑張る
のどちらかになりますね。。。picture要素については検索してみてください。picturefill.jsというポリフィルもありますので、よほど古い環境を相手にしない限り実務でも結構使えます。
２の方は、、、
・img要素をdivで包む
・親divはoverflow:hidden;とposition:relative;を指定する
・親divの高さはCSSで望む比率になるようにpaddingで設定する
・メディアクエリで親divの表示比率を切り替える
・子のimg要素はposition:absoluteで親divの中央に配置し、メディアクエリで横幅に合わせるのか縦幅に合わせるのかを切り替える（はみ出した分はoverflow:hiddenでカットされる）
・親の横幅に合わせるときは img {width: 100%; height: auto;} 親の縦幅に合わせる時は img{height: 100%; width: auto;}
みたいなことをやれば全環境サポートしつつ同じ画像１つで柔軟に見せ方変えられます。
（※かなり大雑把な説明です）
＞３
常識的に考えて高さ320px以下になるような環境は対象外として良いと思いますよ。
どこまでも無限にサポートできるわけではないので、想定する最低画面サイズを設定して、そこまでは頑張るようにすれば良いと思います。
あなたの回答
tips
プレビュー
