如何在 CSS 中保持 Div 的長寬比，同時填滿整個螢幕？

在CSS 中填滿螢幕寬度和高度時保持Div 的寬高比

在填滿螢幕寬度時保持div 的寬高比和高度，我們可以利用CSS視口單位vw（視口寬度）和vh（視口高度）。這種方法可確保元素始終填滿最大視窗大小，而不會破壞比例或建立捲軸。

FIDDLE

純CSS

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

此CSS 確保擴展以包含螢幕的整個寬度和高度（vw 和vh 單位）。

保持寬高比 16:9（高:寬比為 56.25） vw:100vw).
• 透過設定最大高度和寬度來防止溢出約束。
• 將 div 在可用視口空間內垂直和水平居中。

以上是如何在 CSS 中保持 Div 的長寬比，同時填滿整個螢幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！