幅の比率に応じて高さを変えるCSSを実装するいくつかの方法

[解決策1: パディングの実装]

原理：

要素の padding の値がパーセンテージの場合、このパーセンテージは親要素の幅に対する相対値となり、padding-bottom についても同様です。

高さが幅に比例する効果を得るには、height の代わりに padding-bottom を使用します。padding-bottom を実現したい高さの値に設定します。同時に

要素の「高さ」が padding-bottom の値と等しくなるように、高さは 0 に設定され、目的の効果が得られます。

<div class="父">
    <div class="childbox"></div>
</div>
<スタイル タイプ="text/css">
.childbox{
  パディング下部: 20%;
  幅: 20%;
  高さ: 0;
  背景: #888888;
}
</スタイル>

上記の例のアスペクト比は 1:1 です。つまり、正方形であり、親ボックスの幅に応じて比例して拡大縮小されます。

[解決策2：達成するための隠し絵]

原理：

div コンテナーに高さが指定されていない場合、コンテナー内の要素が変化すると高さが拡大します。この時点で、コンテナー内にアスペクト比に一致する画像を追加し、画像の幅を 100% に設定し、高さは自動です。画像で幅のみを設定すると、高さは幅に比例して変化し、自動的に拡大縮小されるため、内部のサブコンテナーの高さも比例して拡大縮小されます。もちろん、この画像を非表示にしたり、別のボックスで覆ったりすることもできます。

＃容器 {
  幅: 100%;
}
.属性 {
  背景色: #008b57;
}
.attr画像{
  幅: 100%;
  高さ: 自動;
}
</スタイル>
<div id='コンテナ'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

この方法では互換性を考慮する必要がなく、PC モバイルで完全に実行されます。 DOM 構造を追加すること以外では、ページ上の数百または数千のコードを考慮すると、言及する価値はありません。

imgタグを追加するとHTTPリクエストが多すぎると思われる場合は、base64画像エンコードでこの問題を解決できます。画像に必要なのは1つの形状だけなので、

HTTP リクエストを保存しながら、大胆に圧縮してエンコードできます。

[スキーム3: vw、vh]

CSS3の新しい単位（CSS3は素晴らしいですね～）、親コンテナの幅と高さを同じvwとして定義し、親コンテナの高さと幅が同じ値になるようにします。このとき、子コンテナの幅と高さの値はパーセンテージで設定します。親コンテナのサイズがどのように変化しても、子コンテナの高さと幅の比率は変わりません。

ユニットの説明
vwはビューポートの幅に相対的である
vhはビューポートに対する相対的な高さです
vminはビューポートの幅または高さの小さい方を基準とし、vminの100単位に均等に分割されます。

vmaxはビューポートの幅または高さの大きい方を基準とし、vmaxの100単位に均等に分割されます。

<div class="父">
    <div class="childbox"></div>
</div>
.childbox{    
  幅: 20%;
  高さ：20vw;
  背景: #888888;
}

これで、幅に比例した CSS の高さを実装するいくつかの方法についての記事は終了です。幅に比例した CSS の高さに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。