如何使用 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 是一個自訂CSS 變量，它將寬高比儲存為小數。
• aspect-ratio 屬性設定計算的縱橫比。
• width 屬性計算 90% 之間的最小值可用空間、960px 和視口高度的 90% 乘以縱橫比。這可確保寬度與高度保持比例。
• 高度由縱橫比屬性結合計算出的寬度決定。

這樣的方法可確保 div 元素自動調整大小，同時保持所需的寬高比，適應寬度和高度的變化。

以上是如何使用 CSS 自動調整 Div 元素大小來保留寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！