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

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

Proof4 さんからの 回答

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

  • 2019/09/12 11:16
  • 回答No.1
  • ベストアンサー
Proof4

ベストアンサー率 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% (295/433)

とても参考になりました。ありがとうございました。
投稿日時:2019/09/13 16:06
この回答にこう思った!同じようなことあった!感想や体験を書こう!
この回答にはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
  • 背景画像を固定表示でその画像にリンクを… HTML

    自身のウェブサイトの画面右下に画像を表示させて、 なおかつその画像にリンクを貼りたいのですが、 htmlやcssのスキルは並みの者なので、どうかご助力をお願いします! イメージとしては、 ttp://www.rakuten.co.jp/e-goods/ や ttp://www.designwalker.com/ の右側にある画像リンクです。 こちら2つのサイト様のソースを拝見して、 作用している部分を抽出して自分なりに作ってみたのですがうまくいきませんでした。 IEでうまく表示されなかったのです。 他ブラウザではちゃんと右側に出て、スクロールしても画像が固定されるのですが、 IEだけ普通に画像が表示されているだけの状態(左寄せに表示されていて、スクロールしても固定表示されていない)になってしまいます。 2つめに挙げたサイト様はJavaScriptを使用されているっぽい(?)のですが、 できればJavaScript無しで表示させたいです。 IE以外のブラウザではうまく表示されていたので、ちょっと悔しいです。。 解決方法がお分かりになる方、ご意見をいただけるととても助かります。 どうぞ宜しくお願いします!...

  • 自分が持ってる画像を、普段見るどのwebサイトにも背景画像として常に表... Windows XP

    自分が持ってる画像を、普段見るどのwebサイトにも背景画像として常に表示させたいのですが、それは可能でしょうか? 例えばYahoo! Google youtube、その他全てのサイトの背景に、デスクトップの背景の壁紙のように、常に画像を表示させたいということです。つまりブラウザウィンドウの背景に画像を常に表示させたいということです。 重くなるかもしれませんが構いません。 できるのであれば、設定方法やフリーソフトを教えていただきたいです。 この文章の意味が分からなかった場合は遠慮なく是非質問してください。こちらで補足させて頂きます。 回答よろしくお願いします。...

  • Webサイトに画像を表示させるには? ホームページ作成ソフト

    現在、テンプレートを使用して穴埋め式でサイトを作っています。 与えられたテンプレート(index.htmlというファイル)をメモ帳にドラック゛して、そこに文字を入れて、ある程度できたところで、メモ帳を保存して、firefoxの画面にドラッグして確認しています。 今回の質問としましては、以下のテンプレートに画像のファイル名を入力したのにどうして画像が表示されないのか、どうすれば画像をサイトに表示されるのか、という質問です。 (<!--    -->で括られた(サイトでは表示されない)解説文も一緒に載せました。) 【テンプレートの抜粋】 <!-- ●ヘッダー画像(サイトの看板)ここから● このテンプレートでのヘッダー画像サイズは 横860px 縦200px で設定されています。 サイトのサイズが横860pxです。 ※サイズを変更できる方はご自由にサイズを変更してください。 --> <p class="mainimage"><img src="images/■ここにヘッダー画像のファイル名(.以降も含めたもの)を記入■" width="860" height="200" /></p> <!-- ●●ヘッダー画像(サイトの看板)ここまで●●●●●●●●● --> 【上記のテンプレートの置換え箇所に、海の写真のバナー、という私が保存しておいたものを入力しました】 <p class="mainimage"><img src="images/海の写真のバナー.jpg" width="860" height="200" /></p>】 このファイルは以前あるサイトのバナーを個人的に参考の為にマイピクチャにこの名前で保存しておいたもので、今回試験的にこの名前を入力しました。(これを転用する事はありません)テンプレートで画像サイズを指定する箇所がありますが、この画像のサイズがわからないのでまずはそのまま値を変えないでおきました。 他の文字の箇所や大きい文字にするH1 H2などは正常に表示されていますが、この画像の部分はまったく入力前と変わりありません。画像サイズをそのままにしてあるので、おかしな形になるとは予想していましたが、少なくともなんらかの画像らしきものは表示されると思っていました。 どうすれば、まず、画像が表示されるでしょうか? よろしくお願いします。...

  • スマートフォンでWebサイトの背景画像が縮小する CSS

    お世話になります。 現在自社にて公開しているWebサイトがあるのですが、背景にはかなり大きめの一枚画像(2500×2500px)を使用しています。そのせいか、iPhoneやiPadなどのスマートフォン関連の端末で閲覧してみると背景だけ縮小して表示され、レイアウト的に少しおかしなことになります。 これは解決する方法はあるのでしょうか。ネットで少しだけ調べてみましたら、背景画像は大きな画像は使わず、小さな画像をrepeatして使用するようにということでした。 それで質問なのですが、スマートフォン向けの画像とCSSを別途用意して、スマートフォンなどで閲覧するユーザーだけにCSSを適用する、そういったことは可能なのでしょうか。 もし可能ならどのように記述すればいいのか教えていただけないでしょうか。 よろしくお願い致します。...

  • WEBサイトのメニューバーを画像で作るのがいいのか、それともテキストと HTML

    WEBサイトのメニューバーを画像で作るのがいいのか、それともテキストとCSSの背景画像で作るのがいいのか、どちらがどういいのか良くわかりません。 それぞれの長所と短所を教えて下さい。 また、他にメニューバーを作る方法があれば教えて下さい。 よろしくお願いします。...

ページ先頭へ