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

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

問題ステートメント

div の作成要素

• 利用可能な画面スペースに合わせてサイズを自動的に調整します
• サイズ変更時に元のアスペクト比を維持します
• 指定された幅と高さの範囲内に収まります寸法

ソリューション

アスペクト比プロパティを利用すると、目的の結果を達成できます動作:

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: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

説明

• aspect-ratio: var(--r): 目的のアスペクト比を定義します ( 960ピクセル： 540px)

• width: 次の小さい方に基づいて幅を計算します:

  • 利用可能なウィンドウ幅の 90%
  • 960px
  • ウィンドウの高さの 90% にアスペクトを乗算したもの比率
• 線形グラデーション背景: サイズ変更中に背景パターンのアスペクト比がどのように維持されるかを示します。

このソリューションでは、指定された最大サイズ内で、元のアスペクト比を維持しながら自動的にサイズ変更される div。

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