こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

投稿日時 - 2019-09-11 22:45:31

QNo.9655854

すぐに回答ほしいです

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

端末の解像度に合わせた画像を作成するのは、世の中に様々な解像度を持つ端末があることを考えると現実的な解決策ではありません。
しかしながら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;を指定すると、画像のアスペクト比を維持したまま親要素いっぱいに表示することができます。

参考URL:https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

投稿日時 - 2019-09-12 11:16:31

お礼

とても参考になりました。ありがとうございました。

投稿日時 - 2019-09-13 16:06:43

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問