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

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

使用可能な画面の幅と高さを確実に満たしながら、Div の固定アスペクト比を維持します。 CSS では、どちらかの側の寸法を超えることは難しい作業になる可能性があります。この課題に対処するために、新しいビューポート単位 vw と vh を活用する純粋な CSS ソリューションを紹介します。

vw と vh を使用すると、ビューポートの幅と高さを基準にして div の幅と高さを定義できます。 。これにより、アスペクト比を崩すことなく div が常に最大スペースを占めることが保証されます。 div がオーバーフローするのを防ぐために、比率の値を使用して最大高さと最大幅の制約も設定します。

div を垂直方向と水平方向の両方で中央揃えにするには、position:Absolute を使用して上部に配置します。ウィンドウの下端、左端、右端。これにより、画面サイズに関係なく div が中央に維持されるようになります。

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

このソリューションは、必要な 16:9 のアスペクト比を維持しながら、さまざまな画面サイズに適応します。ウィンドウのサイズを垂直または水平に変更すると、それに応じて div が調整され、スクロールバーや歪みなしで最大のスペースが占有されます。

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