アスペクト比とセンタリングを使用してレスポンシブな正方形 Div を作成するにはどうすればよいですか?

ビューポートの寸法に応じたアスペクト比の維持

ビューポートの幅と高さに基づいてアスペクト比を維持する応答性の高い正方形 div を実現するには、 CSS のアスペクト比プロパティ。

要件:

• 純粋な CSS
• 正方形は、方向に関係なくビューポートの最小寸法に適応します
• ビューポート内の水平方向と垂直方向のセンタリング

アスペクト比ソリューション

アスペクト比プロパティを使用すると、目的のアスペクト比を指定できます。デフォルトでは、このプロパティは幅を基準にして高さを設定します。したがって、1 / 1 のアスペクト比は正方形を作成します。

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

ビューポートの寸法に適応する

正方形の div がビューポートの最小寸法に適応するようにするには:

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

垂直方向と水平方向の中央揃え

正方形を中央揃えにするには、垂直方向と水平方向の両方に自動でマージンを設定する必要があります:

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

例

<code class="html"><div class="square">Aspect ratio 1:1</div></code>

結論

アスペクト比を使用すると、アスペクト比を維持し、ビューポート内の中央に配置される応答性の高い正方形 div を作成できます。ビューポートの寸法や方向に関係なく、一貫した視覚体験を提供します。

以上がアスペクト比とセンタリングを使用してレスポンシブな正方形 Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。