質問と回答の形式に焦点を当てた、記事のタイトル候補をいくつか示します。 * ビューポートのアスペクト比と中心を維持する動的サイズの正方形 Div を作成できますか? *

幅と高さによるアスペクト比の維持

幅と高さの両方に基づいてアスペクト比を維持しながら、正方形の div を動的にビューポートに合わせて中央に配置できますか?

要件:

• CSS のみのソリューション
• 正方形のサイズはビューポートのサイズに自動的に調整されます最小寸法。
• 正方形は水平方向と垂直方向の両方で中央に配置されます。

解決策:

アスペクト比プロパティ (2022) )

目標を達成するには、アスペクト比プロパティを利用します (MDN リファレンス)。この優れたツールを使用すると、幅と高さの比率を指定して、目的のアスペクトを確実に維持できます。

ビューポート サイズ (幅と高さ) に基づいたアスペクト比の維持:

<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;
}

/* For the demo */

body {
  margin: 0;
}</code>

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

この例では:

• クラス ar-1-1 の Div は 1:1 のアスペクト比を維持します。
• クラス ar-1- の Div 19 は 16:9 のアスペクト比を維持します。
• すべての div はビューポートの寸法に基づいてサイズを動的に調整し、適切なセンタリングを確保します。

以上が質問と回答の形式に焦点を当てた、記事のタイトル候補をいくつか示します。 * ビューポートのアスペクト比と中心を維持する動的サイズの正方形 Div を作成できますか? *の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。