幅と高さに基づいて Div のアスペクト比を維持するにはどうすればよいですか?

幅と高さに応じたアスペクト比の維持

ビューポート内で中央に配置された正方形の div を配置しようとすると、どうすればそのアスペクト比を効果的に維持できるかという疑問が生じます。幅と高さの両方の寸法を考慮しながら?

2022 年の CSS アスペクト比プロパティの出現により、この課題に対する包括的な解決策が提供されます。このプロパティにより、開発者はビューポート サイズまたは親要素に対する任意のアスペクト比を維持できるようになります。

ビューポートの寸法に基づいてアスペクト比を維持するという目的を達成するには、次の CSS コードを使用できます。

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}</code>

このコード スニペットは、2 つのアスペクト比、それぞれ 1:1 と 1:19 を例にしています。これらのアスペクト比を利用する div 要素は、ビューポート内でこれらの比率を維持するように寸法を自動的に調整し、ビューポートのサイズや方向に関係なく一貫した外観を保証します。

以上が幅と高さに基づいて Div のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。