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

CSS で画面の幅と高さを埋めながら Div のアスペクト比を維持する

画面の幅を埋めながら div のアスペクト比を維持するにはと高さには、CSS ビューポート単位 vw (ビューポートの幅) と vh (ビューポートの高さ) を利用できます。このアプローチにより、比率を壊したりスクロールバーを作成したりすることなく、要素が常に最大ビューポート サイズを満たすことが保証されます。

FIDDLE

Pure 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 */
}

この CSS は、 div:

• 画面の幅と高さ全体 (vw および vh 単位) を含むように拡張します。
• アスペクト比 16:9 を維持します (高さ:幅の比 56.25)。 vw:100vw).
• 最大の高さと幅を設定することでオーバーフローを防止します
• 利用可能なビューポート スペース内で div を垂直方向と水平方向の中央に配置します。

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