如何使用純 CSS 保持 Div 的寬高比，同時填滿整個瀏覽器畫面？

在填充CSS 螢幕寬度和高度時保持Div 寬高比

在網頁設計中，需要保持div 元素的特定寬高比，同時填充兩個元素螢幕的寬度和高度可能會出現。當努力使用純 CSS 實現跨瀏覽器相容的解決方案時，這提出了獨特的挑戰。

兩種常見方法：

1. 影像容器： 使用所需寬高比的影像來展開容器 div。但是，此方法可能會在不同瀏覽器中表現出不一致的行為。
2. 按比例底部填充：以與寬度成比例設定底部填充。不幸的是，這種技術忽略了高度並導致過度的垂直滾動。

小說Lösung：

為了克服這些限制，一種新穎的方法利用了最近的引入了CSS視口單位，vw（視口寬度）和vh（視口高度）。透過合併這些單位，我們可以根據可用的螢幕空間動態調整 div 的尺寸。

程式碼片段：

div {
  width: 100vw;
  height: 56.25vw; /* 9/16 = .5625 aspect ratio */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 aspect ratio */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

主要功能：

• div 的寬度設定為100%口寬度(vw)。
• 高度根據寬高比（寬度的 56.25%）計算。
• 如果視窗高於計算的高度，則 max -height 屬性設定為 100vh。
• 如果視口比計算的寬度寬，則max-width 屬性設定為 1.778vw（源自寬高比）。
• 絕對定位和自動居中邊距確保 div 在視窗內居中對齊。

結論：

透過槓桿CSS 視口單元，我們可以實現跨瀏覽器相容的解決方案，保持div 所需的寬高比，同時水平和垂直無縫填充可用螢幕空間。這種方法消除了複雜的 JavaScript 操作的需要，並為響應式 Web 佈局提供了簡單而有效的解決方案。

以上是如何使用純 CSS 保持 Div 的寬高比，同時填滿整個瀏覽器畫面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！