質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2780questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    196questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

レスポンシブ画像サイズ vh px % 何で指定すべき?

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,489

レスポンシブサイトを初めて制作しています。
ブラウザ幅を狭めるごとに画像もゆるやかにサイズを拡大縮小したいです。
ゆるやか〜に画像を拡大縮小するにはどのような指定方法が良いでしょうか?

メディアクエリにvhで指定したのですが、縦にブラウザを縮めると、レイアウトがおかしくなったため、

height:300vw;


と、高さをvwで調整しています。
ベストな方法は他にありますか?

ーーーーーーーーーーーーーーーーーー

また、トップページの一番最初に見られる背景画像をユーザーの各ブラウザの高さに合わせてちょうど100%で表示したいのですが、100vhで指定すると、やはりブラウザを縦に縮めると全体のレイアウトが崩れてしまいます。

こんな感じで。参考サイト

リンク先のサイトも、縦に縮めるとレイアウトが崩れていますが。。。
縦に崩れてもいいんでしょうか?他にどのような指定方法がありますか?

まとめると、

・画像をゆるやかに拡大縮小させるとき vh vw % px その他 どのように指定されますか?

・トップページ背景画像を、ブラウザの高さ100%、レイアウトを崩さずに表示させるにはどのようにすればよいでしょうか?

よろしくお願いします。

補足
![イメージ説明]

左上が元画像だとして、

【デバイス横の場合】
デバイスが小さい場合はそのまま縮小して、大きくなった場合は画質(解像度?)が荒れない程度に拡大表示したい

【デバイス縦の場合】
写っているものが切れてもOK(画像の場合、木が切れている、人間の右側の余白もほぼない)
で、真ん中あたり?に画像が表示されるようにしたい

参考サイトも、縮めると横が切れる。
参考サイト

ちなみに、今のコードは

.top {
  background-image: url('../images/town_bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  padding-bottom:7vh;
}


で、ブレイクポイントごとに背景画像のサイズを変えています。

1000px以上なら 100vh
800px以上なら  800px
550px以上なら    590px

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • chiro.0519

    2016/09/06 22:02

    ブラウザの高さ100%、レイアウトを崩さずに表示させる だとブラウザを縦で見ている人には画像が縦長に表示されるって事でいいですか? もっと例えるならスマホで横向きで見ている人と縦向きでみている人と縦横比が変わりますが、背景画像はそのデバイスにピッタリ沿うような形で表示れるって事ですか?

    キャンセル

回答 1

+1

 可変領域いっぱいに拡がるように画像をゆるやかに拡大縮小する方法

一番簡単なのは、img画像を直接HTMLに埋め込むのではなく、
可変領域の背景画像として表示し、background-size:coverとすることですね。
背景画像なので、用意している画像と実際の表示領域のアスペクト比が違ってしまっていても、
自動的に入りきらない領域はカットされるので特別な処理が必要ありません。

img画像で同じことをやろうと思うと、結構厄介です。。。

 画像をゆるやかに拡大縮小させるときの単位

一般的なのは%かと思われます。
vh,vwのように環境を選びませんし、親要素に対する比率となるので細かい調整がしやすいので。
(※作りたいものの仕様によってはvh,vwの方が楽だったりすることもあるかもしれませんが)

トップページ背景画像を、ブラウザの高さ100%、レイアウトを崩さずに表示させるには?

「レイアウトを崩さずに」というのが何を指しているのかちょっとよく分かりません。
参考サイトの背景動画も、背景動画自体は画面いっぱいにちゃんと表示されていますので、それは「レイアウトが崩れている」には当たりませんよね?
もしかして高さや幅を小さくした際に、「トップ背景画像領域の上に乗っている各種のアイテムが重なったりおかしなところに表示されたりしないように、」という意味でしょうか?
であればそれは背景画像の話ではなく、ボックスの可変レイアウトの手法ということになりますので、  
「適切な比率で各ボックスのサイズや位置を指定してください」としか言いようがないですね。

ブラウザの高さ100%になる背景画像領域(メインビジュアル等)

ブラウザ画面サイズが変わっても常にウィンドウ領域全体を画像領域で覆うためのボックスの指定方法は、
やはりheight:100vhが最も簡単です。ただ、vhを理解しない環境もありますので、  
そのような環境も含めてサポートしたいとなると、jQueryとかで$(window).height();の値を取ってきて対象領域のheightに動的にセットする処理をしてやらないとダメですね。

ご質問の意図とちょっと違うかもしれませんがそんな感じです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/07 12:12

    1.トップページ背景の画像の拡大、縮小についてはコードを記載しました。おそらく問題ないと思います。

    特にお尋ねしたかったのはimg画像です。
    今のところブレイクポイントごとにpxで指定しているので、ブレイクポイントまでは画像サイズが固定されています。
    1000px-800pxなら 400px で固定
    800px-550pxなら 330pxで固定

    800pxのブレイクポイントで画像のサイズは変わりますが、800-550の間画像サイズが固定されていて、これをゆるやかにサイズ変更したいです。
    vh vwをうま〜く使って出来無いのかな?と思い質問させていただきました。

    2. %が良いのですね。

    3. 「トップ背景画像領域の上に乗っている各種のアイテムが重なったりおかしなところに表示されたりしないように、」という意味です。
    一見ちゃんとしたサイトでも、縦に縮めると参考サイトのように各種アイテムが重なったり、文字がはみ出したり、レイアウトが崩れていることがあるので、そこまでの動きを想定しないほうが良いのかな?と思い質問させていただきました。
    レイアウトが崩れないことが大前提だと思いますが、縦に短いデバイスはないのだから?、その動きにまで気を使う必要はなかったりするのかなと。

    4.とりあえず100vhで指定しているので問題なさそうですね。
     縦に縮めた時にレイアウトが崩れるのが気になりますが、、、 
    Jqueryに関しても少しずつ取り入れていきたいと思います。

    キャンセル

  • 2016/09/07 12:48

    >1
    そういうことでしたら、ゆるやかに拡大縮小させたいメディアクエリの中で、
    img{ width: 100%; height: auto; }とすれば親要素の幅に合わせて画像自身の比率を保ったまま拡大縮小するようになりますよ。
    ただこれだと常に横幅を親要素に合わせる形での拡大縮小になりますので、
    ご希望のように「横長と縦長で見え方を変えたい」という要望には答えられません。

    やり方としては

    1.トリミングの違う画像を2種類用意してpicture要素で切り替える
    2.CSSですごく頑張る

    のどちらかになりますね。。。picture要素については検索してみてください。picturefill.jsというポリフィルもありますので、よほど古い環境を相手にしない限り実務でも結構使えます。
    2の方は、、、

    ・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;}

    みたいなことをやれば全環境サポートしつつ同じ画像1つで柔軟に見せ方変えられます。
    (※かなり大雑把な説明です)


    >3
    常識的に考えて高さ320px以下になるような環境は対象外として良いと思いますよ。
    どこまでも無限にサポートできるわけではないので、想定する最低画面サイズを設定して、そこまでは頑張るようにすれば良いと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2780questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    196questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。