画面全体を占める Div のアスペクト比を 16:9 に維持するにはどうすればよいですか?

画面の幅と高さの両方を満たしながら Div のアスペクト比を維持する方法

Web サイトを 16:9 などの特定のアスペクト比でデザインする場合ビデオのような表示を行うには、利用可能な画面スペースを埋めながらこの比率を維持する必要があります。このタスクでは、コンテンツを中央に配置し、両側の最大サイズを決して超えないようにするという課題があります。

CSS ビューポート単位の適用

実際的な CSS ソリューションには、ビューポート単位 vw (ビューポート幅) と vh (ビューポートの高さ)。これらの単位を使用すると、ビューポートのサイズに応じて要素の寸法を調整できます。 div の幅を 100vw に設定すると、画面幅全体に拡張されます。 16:9 のアスペクト比を維持するために、高さは 56.25vw (9/16 * 100vw として計算) に設定されます。

最大寸法の制限

要素のオーバーフローを防ぐために、次を使用して最大の高さと幅の制​​約が適用されます。

最大高さ: 100vh および 最大幅: 177.78vh (16/9 * 100vh として計算)。

配置とセンタリング

div は、絶対位置と設定

top、bottom、左、右 0. これにより、div が画面の利用可能なスペース内で中央に配置されるようになります。これらの CSS プロパティを組み合わせることで、画面全体の幅と高さを埋めながらアスペクト比 16:9 を維持する div を作成できます。このソリューションは応答性が高く、JavaScript を必要とせずに主要なブラウザ間で一貫して動作します。

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