画面全体を CSS で埋めながらアスペクト比を維持するにはどうすればよいですか?

CSS で画面の幅と高さを埋める際のアスペクト比の維持

問題:
div 要素の作成固定アスペクト比で、画面全体の幅と高さを超えないようにします。

解決策:
CSS ビューポート単位 vw と vh を使用して div の寸法を設定します。

CSS実装:

div {
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

説明:

• ビューポート単位: vw および vh は、ビューポート幅に対する相対的な単位を測定します。
• アスペクト比率: 高さは幅の 56.25% に設定され、9:16 の一定のアスペクト比を維持します。
• 最大寸法: 要素は最大値を使用してビューポートの寸法内に制限されます。 -height と max-width。
• Centering: Position プロパティは両方の要素を中央に配置します。 top:0; を使用して画面上で垂直方向と水平方向に移動します。下:0;そして左：0; right:0;.

結果:

div 要素は、デバイスの向きや向きに関係なく、アスペクト比を崩すことなく利用可能な画面スペースを満たすように拡張されます。画面サイズ

以上が画面全体を CSS で埋めながらアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。