ヘルプが必要ヘッダー画像のレスポンスデザインを取得する

Question

私のウェブサイト全体が私のバナー/ヘッダーを除いて反応しますが、修正が見つからないようです。私は応答性のためにビューポートを使用し、私のバナーはそれに全く反応しません！あなたは全体のイメージがビューポートに表示し、規模になりたい場合はここで

は、シンプルなヘッダのJSFiddle、 https://jsfiddle.net/Syystole/L9r2p9so/19/

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<div class="WrapperPage"> 
     <div id="banner"></div> 
</div> 

CSS

.WrapperPage { 
    max-width:62em; 
    margin:auto; 
      } 

#banner { 
    background-image: url("http://lorempixel.com/400/200/sports/1"); <!./ starts from current directory> 
    text-align:center; 
    padding:170px; 
     } 

Answer 1

です要素に合うように画像を伸ばすためにbackground-size: coverの組み合わせを使用し、画像のアスペクト比に合わせてpadding-bottom: 50%を使用しますcover`が、わからない：あなたは `バックグラウンド・サイズを使用するように画像全体が

.WrapperPage { 
 
    max-width: 62em; 
 
    margin: auto; 
 
} 
 

 
#banner { 
 
    background-image: url("http://lorempixel.com/400/200/sports/1"); 
 
    text-align: center; 
 
    padding-bottom: 50%; 
 
    background-size: cover; 
 
}

<div class="WrapperPage"> 
 
    <div id="banner"></div> 
 
    <p> 
 
    body text 
 
    </p> 
 
</div>