如何在可調整大小、居中的 Div 元素中保持寬高比？

在自動調整大小的Div 元素中保持寬高比

建立保持在螢幕中央的可調整大小的div 元素時，重要的是要確保無論視窗大小如何變化，其縱橫比都保持不變。這可以使用 CSS 技術來實現。

CSS 解決方案：

aspect-ratio 屬性提供了一個簡單的解決方案，可以在調整 div 元素大小時保持寬高比。以下CSS 程式碼示範如何實現此目的：

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

說明：

• aspect-ratio 屬性建立元素所需的長寬比，這是根據初始寬度和高度值（960px 和540px，

• width 屬性確保元素的寬度保持在指定的約束範圍內：

  • 最大可用寬度的90%
  • 最大960px
  • 保持與可用高度相關的縱橫比的寬度(90vh乘以var(--r))
• 添加背景漸變是為了直觀地證明縱橫比保持不變，因為無論元素的角度如何變化，漸變的角度都保持不變尺寸。

結果：

以上CSS程式碼結果在保持螢幕居中的 div 元素中，保持其所需的寬高比，並調整大小以適應可用的視窗空間。

以上是如何在可調整大小、居中的 Div 元素中保持寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！