さまざまなディスプレイのヒーローイメージサイズ

Question

私はヒーローイメージを含むウェブサイトを構築中です。現在のところ、画像サイズは1560ピクセルですが、大きなディスプレイでは十分ではないと心配しています。私はむしろ写真の縁を見ることができません。

同時に、私はモバイルユーザーが読み込まなければならないイメージが大きすぎることを望んでいません。

ここで最善の妥協点は何ですか？あなたはディスプレイのサイズに応じて異なる画像をロードするはずですか？

編集：申し訳ありませんが、画像の幅を100％にする方法を知っていたはずですが、解像度が不足していると心配しています。私が尋ねていることは、あなたがベストプラクティスのために異なるディスプレイに異なるイメージをロードするはずかどうかということですね。

Answer 1

あなたの質問は、あなたがヒーローイメージをどのように作成しているかのヒントを与えていません。それは<img>ですか、それともdivの背景にありますか？これは私が通常どのように "フルハイト"のヒーローイメージを行うかです。

body { 
 
    margin: 0; 
 
} 
 

 
.hero { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.content { 
 
    width: 480px; 
 
    padding: 15px; 
 
    margin: 0 auto; 
 
}

<div class="hero"> 
 
    
 
</div> 
 
<div class="content"> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
</div>

Answer 2

あなたは解像度を心配している場合には、最良の方法は、別のウィンドウサイズの異なる画像を読み込むことであろう。 CSSを使用して画像を読み込んでいる場合は簡単ですが、タグを使用している場合は、<picture>タグの使用に関するMr Listerのコメントに付随する必要があります。ただし、<picture>は実験的なもので、古いブラウザではサポートされません。

もう1つの方法は、HTMLとCSSの両方を使用することです。タグのimgに幅100％の追加

@media only screen and (min-width: 1200px) { 
 
     .below-1200px, 
 
     .below-800px { 
 
      display: none; 
 
    } 
 
    } 
 
    @media only screen and (min-width: 800px) { 
 
     .above-1200px, 
 
     .below-800px { 
 
      display: none; 
 
    } 
 
    } 
 
     .above-1200px, 
 
     .below-1200px { 
 
      display: none; 
 
    }

<img class="above-1200px" src="http://placehold.it/1200x150"/> 
 
    <img class="below-1200px" src="http://placehold.it/800x150"/> 
 
    <img class="below-800px" src="http://placehold.it/400x150"/>