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

Div 要素のサイズを自動的に変更しながらアスペクト比を維持する方法

特定のアスペクト比を維持しながらサイズを自動的に調整する div 要素の作成挑戦になる可能性があります。目標は、div がウィンドウ内の中央に留まり、その形状を歪めることなく、必要に応じて利用可能なスペースに合わせて縮小または拡大することです。

これを達成するための鍵は、アスペクト比を考慮した CSS プロパティを利用することにあります。制御と適応型サイジング。アスペクト比プロパティは、CSS3 で導入された強力なツールで、開発者が高さと幅の固有の比率を指定できるようにします。この比率は、利用可能なスペースに関係なく維持されます。

アスペクト比に加えて、min-width プロパティと min-height プロパティを使用して、div の最小寸法を確立できます。これらのプロパティを組み合わせることで、指定されたアスペクト比を尊重しながら、利用可能なウィンドウ スペース内に収まる div 要素を作成できます。

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

この例ではでは、必要なアスペクト比を表す 960 対 540 の比率を格納する --r 変数を定義します。次に、この比率を維持するためにアスペクト比プロパティが使用されます。

幅プロパティは、使用可能な幅の最小値 90%、960px、または使用可能な高さとアスペクト比に基づいて計算された幅に設定されます。これにより、div がウィンドウ内に収まる間、指定された比率を維持することが保証されます。

min-width プロパティと min-height プロパティは明示的に設定されませんが、デフォルト値の auto により、div はそれに合わせて縮小できます。アスペクト比を維持しながらウィンドウ サイズを小さくします。

表示プロパティは、折り返し div 内での中央揃えを有効にするために flex に設定され、justify-content プロパティと align-items プロパティが使用されます。

その結果、ステージ div 要素はアスペクト比を維持しながら自動的にサイズ変更され、ウィンドウの寸法に関係なく中央に配置され、視覚的に一貫した状態が保たれます。

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