ページの縮小に合わせてdivを縮小するにはどうすればよいですか？

Question

私はdivがページが縮小するにつれて動的に縮小するプロジェクトに取り組んでいます。残念ながら、divが同じ高さをこのようにとどまる：

CSSの代わりに固定された高さの

.container { 
    min-height: 180px; 
    max-height: 350px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 350px; 
} 

HTML

<div class="container"></div> 

Answer 1

、に応じて高さをem/vh/%単位を使用します何が適切です。範囲を定義するには、相対的な高さをmin-heightとmax-heightで指定することもできます。たとえば、ウィンドウのサイズを変更して、コンテナが常に使用可能な高さの半分を占めていることを確認します。

.container { 
 
    height: 50vh; 
 
    background: green; 
 
}

<div class="container"></div>