自動レゾディングDIV要素のアスペクト比を維持する

画面の中心にある再装置のdiv要素を作成する場合、窓のサイズの変化に関係なく、そのアスペクト比が維持されることを保証することが重要です。これは、CSSテクニックを使用して達成できます。次のCSSコードは、これを達成する方法を示しています：

body { 高さ：100VH; マージン：0; ディスプレイ：Flex; justify-content：center; Align-Items：Center; 背景：灰色; } .Stage { -R：960 /540; //目的のアスペクト比（幅 /高さ）を定義する アスペクト比：var（ - r）; //アスペクト比を設定します 幅：min（90％、min（960px、90vh*（var（ - r））））; //比率を維持中に最大幅と高さを設定します ディスプレイ：Flex; justify-content：center; Align-Items：Center; 背景： 線形勾配（30DEG、赤50％、透明50％）、//勾配を追加して、保存されたアスペクト比を視覚化する チョコレート; }

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

利用可能な幅の最大90％

最大960px