質問: 表題のとおりなのですが、 WEBサイトで背景画像を画面いっぱいに表示したいっていう場合 画像のサイズってどれくらいで作っておけば良いのでしょうか? 画像の左右と上下を切らずに画面のサイズに合わせようとすると 当然機種によっては変な伸び方になってしまうと思いますし、 縦持ち、横持ちにも対応する場合は縦用と横用で 画像を切り替えるのがベストなのでしょうか??
回答: 端末の解像度に合わせた画像を作成するのは、世の中に様々な解像度を持つ端末があることを考えると現実的な解決策ではありません。 しかしながらobject-fitプロパティを利用すればこの問題はいとも簡単に解決します。 【HTML】 【CSS】 #img_wrap{ width: 100vw; height: 100vh; } #img_wrap img{ width: 100%; height: 100%; object-fit: cover; } object-fitプロパティでは、要素に対して画像をどのようにはめ込むかを指定することができます。object-fit: cover;を指定すると、画像のアスペクト比を維持したまま親要素いっぱいに表示することができます。 参考URL: