Pure CSS を使用してブラウザ画面全体を表示しながら Div のアスペクト比を維持するにはどうすればよいですか?

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

Web デザインでは、div 要素の特定のアスペクト比を維持しながら、同時に両方の要素を埋める必要があります。画面の幅と高さが発生する可能性があります。これは、純粋な CSS を使用してブラウザ間互換性のあるソリューションを目指す場合に特有の課題になります。

2 つの一般的なアプローチ:

1. 画像コンテナ: 希望のアスペクト比の画像を使用してコンテナ div を展開します。ただし、このメソッドは異なるブラウザ間で一貫性のない動作を示す可能性があります。
2. Proportional Bottom Padding: 幅に比例して下部パディングを設定します。残念ながら、この手法では高さが無視され、過剰な垂直スクロールが発生します。

A Novel Lösung:

これらの制限を克服するために、新しいアプローチでは、最近のCSS ビューポート単位である vw (ビューポートの幅) と vh (ビューポートの高さ) を導入しました。これらのユニットを組み込むことで、利用可能な画面スペースに基づいて div のサイズを動的に調整できます。

コード スニペット:

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

主な機能:

• div の幅は次のように設定されます。ビューポートの幅 (vw) の 100%。
• 高さはアスペクト比 (幅の 56.25%) に基づいて計算されます。
• ビューポートが計算された高さより高い場合、 max-height プロパティは 100vh に設定されています。
• ビューポートが次の幅よりも広い場合計算された幅、max-width プロパティは 1.778vw (アスペクト比から導出) に設定されます。
• 絶対配置と自動中央揃えマージンにより、div が領域内で中央に揃えられるようになります。 viewport.

結論:

CSS ビューポート ユニットを活用することで、div の望ましいアスペクト比を維持しながらブラウザ間互換性のあるソリューションを実現できます。利用可能な画面スペースを水平方向と垂直方向の両方でシームレスに埋めます。このアプローチにより、複雑な JavaScript 操作の必要性がなくなり、レスポンシブ Web レイアウトのための簡単かつ効果的なソリューションが提供されます。

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