自動調整 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;
}

在這個範例中，我們定義一個 --r 變數來儲存 960 到 540 的比率，代表所需的寬高比。然後使用寬高比屬性來維持此比例。

寬度屬性設定為可用寬度的 90%（960px）或根據可用高度和寬高比計算出的寬度中的最小值。這確保了 div 在適合視窗時保持指定的比例。

min-width 和 min-height 屬性沒有明確設置，但它們的預設值 auto 將允許 div 縮小以適應較小的窗口尺寸，同時仍保留縱橫比。

display 屬性設定為flex 以在包裝div 內啟用居中對齊，並且justify-content 和align-items 屬性用於使內容在包裝內居中div.

因此，舞台div 元素將自動調整大小，同時保持其縱橫比，確保無論視窗尺寸如何，它都保持居中且視覺上一致。

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