• ベストアンサー
  • すぐに回答を!

WEBサイトで画像をいっぱいに表示する

  • 質問No.9655854
  • 閲覧数75
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 68% (296/434)

表題のとおりなのですが、
WEBサイトで背景画像を画面いっぱいに表示したいっていう場合
画像のサイズってどれくらいで作っておけば良いのでしょうか?

画像の左右と上下を切らずに画面のサイズに合わせようとすると
当然機種によっては変な伸び方になってしまうと思いますし、
縦持ち、横持ちにも対応する場合は縦用と横用で
画像を切り替えるのがベストなのでしょうか??

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 72% (111/153)

端末の解像度に合わせた画像を作成するのは、世の中に様々な解像度を持つ端末があることを考えると現実的な解決策ではありません。
しかしながらobject-fitプロパティを利用すればこの問題はいとも簡単に解決します。

【HTML】
<div id="img_wrap">
<img src="image.jpg" alt="test image">
</div>

【CSS】
#img_wrap{
width: 100vw;
height: 100vh;
}
#img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}

object-fitプロパティでは、要素に対して画像をどのようにはめ込むかを指定することができます。object-fit: cover;を指定すると、画像のアスペクト比を維持したまま親要素いっぱいに表示することができます。
お礼コメント
ekekojr

お礼率 68% (296/434)

とても参考になりました。ありがとうございました。
投稿日時:2019/09/13 16:06
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ