サイズ変更可能な中央揃えの Div 要素でアスペクト比を維持するにはどうすればよいですか?

自動サイズ変更 Div 要素でのアスペクト比の維持

画面の中央に留まるサイズ変更可能な div 要素を作成する場合、次のことを確認することが重要です。ウィンドウ サイズの変更に関係なく、アスペクト比が維持されることを確認します。これは、CSS テクニックを使用して実現できます。

CSS ソリューション:

アスペクト比プロパティは、div 要素のサイズを変更する際にアスペクト比を維持するための簡単なソリューションを提供します。次の CSS コードは、これを実現する方法を示しています。

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

説明:

• アスペクト比プロパティは、要素に必要なアスペクト比を確立します。これは、幅と高さの初期値 (960 ピクセルと 540 ピクセル) に基づいて計算されます。

• width プロパティは、要素の幅が指定された制約内に収まるようにします:

  • 利用可能な幅の最大 90%
  • 最大960px
  • 利用可能な高さに対してアスペクト比を維持する幅(90vh と var(--r) の乗算)
• 背景のグラデーションが追加され、アスペクト比が維持されていることを視覚的に示します。これは、グラデーションの角度が変化に関係なく一定のままであるためです。要素の

結果:

上記の CSS コードにより、画面の中央に留まり、必要なアスペクト比を維持し、次のようにサイズ変更される div 要素が生成されます。利用可能な窓のスペースに合わせてください。このソリューションは、要素の幅と高さの両方のサイズを変更するのに効果的に機能します。

以上がサイズ変更可能な中央揃えの Div 要素でアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。