CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携帯電話の幅が変わっても高さは半分のままになるという状況に遭遇しました。

したがって、適応幅と半分の高さを持つコンテナを実装する必要があります。

ここでは、高さが幅の半分であるという例を取り上げていますが、他の比率にすることもできます。

1. どうやって達成するかを考える

この問題は、モバイル ページに幅 100% の画像がある場合に似ています。高さを設定しないと、画像は元のサイズに応じて比例して拡大縮小されます。

この考え方を使用すると、要素の高さに応じて、要素に対応する比例した高さを設定できます。

2. 実装方法1 - vwビューポート単位経由

いわゆるビューポート単位は、ビューポートのサイズに相対的です。100vw はビューポート幅の 100% に等しく、つまり、1vw はビューポート幅の 1% に等しくなります。

この機能を使用すると、モバイル デバイス上でアスペクト比が等しい適応型コンテナーを実装できます。

HTMLコード:

<div class="box">
    <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
</div>

CSSコード:

*{
    マージン:0;
    パディング:0
}
。箱{
    幅:100%;
    高さ:51.5vw
}
.box 画像{ 
    幅:100%; 
}

.box の高さが 51.5vw なのはなぜですか?

その理由は、画像の元のサイズが 884 * 455 であり、幅と高さの比率が 455 / 884 = 51.5% であるためです。

画像の元の比例スケーリングと比較して、この方法には利点があります。画像が正常に読み込まれたかどうかに関係なく、コンテナーの高さが常に計算されるため、ページのジッターやページの再描画が発生せず、パフォーマンスが向上します。

この場合の画像読み込みの成功と失敗の比較を見てみましょう。

3. 実装方法2 - サブ要素のパディングによる

これは、子要素の padding 属性を設定することで実現されます。これは一般的な方法であり、より優れた効果があります。ここで理解する必要があるのは、子要素の padding 属性のパーセンテージ値は、まず親コンテナーの幅を参照するということです。

以下にコードと効果の図を示します。

HTMLコード:

<div class="box">
    <div class="text">私は王平安、pingan8787です</div>
</div>

CSSコード:

。箱{
    幅: 200ピクセル;
}
。文章{
    パディング: 10%;
} 

分析:

ここでは、親コンテナ .box の幅を 200px に設定し、子要素 .text の padding を 10% に設定しているので、.box の padding 計算結果は 20px になります。

次に、トピックに関連して、この原理を使用して等比率の問題を解決します。

HTMLコード:

<div class="box">
    <div class="text">
        <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
    </div>
</div>

CSSコード:

。箱{
    幅: 100%;
}
。文章{
    オーバーフロー: 非表示;
    高さ: 0;
    パディング下部: 51.5%;
}
.box .text 画像{
    幅: 100%;
}

ここで、.text のpadding-bottom: 51.5%;も、画像の元のサイズのアスペクト比を使用して、最初の方法に従って計算されます。.text を height: 0; に設定すると、高さが実際のサイズよりも高くなることに注意してください。したがって、この状況を回避するには、height: 0; を設定する必要があります。

そこで私たちはこの問題を2つの方法で解決しました。

要約する

上記は、CSS で等アスペクト比のアダプティブ コンテナーを実現するために紹介した方法です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!