応答性の高さ

Question

これは私のコードです：

#bener{ 
 
     background:url(../img/main.png) no-repeat; 
 
    \t background-size:120%; 
 
    } 
 
    
 
    .bener_content{ 
 
     color:#fff; 
 
    \t text-align:center; 
 
    \t margin-top: 30%; 
 
    } \t 
 
    .bener_overlay{ 
 
    \t background: rgba(75, 78, 78, 0.7); 
 
     height: 120%; //This line 
 
    } \t 
 
    .bener_content h2{ 
 
     color:#ffff; 
 
    } \t 
 
    .bener_content p{ 
 
     color:#ffff; \t 
 
    }

 
 
<section id="bener" class=""> 
 
    <div class="bener_overlay"> 
 
     <div class="container"> 
 
     <div class="bener_content"> 
 
      <p class="textmiddle">TEXT</p> 
 
\t \t <h3>Text</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</section>

私が持っている問題は、私は別の解像度に私のウェブサイトを試してみたときに、私のホームページの画像がスケールしないということです、幅は問題ありませんが、高さは常に同じです。 .benner_overlayでは、高さはパーセンテージで表示されていましたが、何らかの理由で何も起こりません。また、ピクセルを使用すると反応しません。 これを解決するにはどうすればいいですか？私のウェブサイトをどこで試しても、ホーム画像は画面全体をカバーします。

Answer 1

コメントとして既に言及されているように、パーセンテージベースの高さを使用するには、親要素のパーセンテージベースの高さも必要です。それを達成するには、基本的にルート要素から開始し、ツリーを通過する必要があります。考えられる解決策は次のようになります。

html, body { 
    height: 100%; 
} 

#bener { 
    background: url(../img/main.png) no-repeat; 
    background-size: 120%; 
    height: 100%; 
} 

Demo

Answer 2

として、あなたの背景画像に高さを与えてみてください。そして、それは、任意のデバイスのビューポートの高さに拡張されます

height:100vh; 

。