CSS を使用して Div 要素の自動サイズ変更でアスペクト比を維持するにはどうすればよいですか?

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

Div 要素は、さまざまな画面サイズに合わせて調整する必要がある場合、スタイルを設定するのが難しい場合があります。特定のアスペクト比。これは、CSS のアスペクト比プロパティと幅属性と高さ属性の直感的な組み合わせを使用して実現できます。

幅と高さの両方の変更を適切に処理するには、アスペクト比の計算 --r = 幅 / 高さを利用できます。 。 CSS で実装する方法は次のとおりです。

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

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width: min(90%, min(960px, 90vh * var(--r)));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}

この例では:

• --r は、アスペクト比を 10 進数として保存するカスタム CSS 変数です。
• アスペクト比プロパティは、計算されたアスペクト比を設定します。
• 幅プロパティは、利用可能なスペースの 90% である 960px と、ビューポートの高さの 90% にアスペクト比を乗算した値の間の最小値を計算します。これにより、幅が高さに比例したままになります。
• 高さは、計算された幅と組み合わせてアスペクト比プロパティによって決定されます。

このようなアプローチにより、div 要素が確実に希望のアスペクト比を維持しながら、幅と高さの両方の変化に対応しながら自動的にサイズ変更されます。

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