如何在用 CSS 填滿整個螢幕的同時保持 Div 的寬高比？

使用CSS 填充屏幕寬度和高度時保持Div 的寬高比

保持div 的固定寬高比，同時確保它填充可用的屏幕寬度和高度，而無需在CSS 中，超過兩側的尺寸可能是一項棘手的任務。為了應對這項挑戰，我們提出了一個利用新視窗單位 vw 和 vh 的純 CSS 解決方案。

使用 vw 和 vh，我們可以定義相對於視窗寬度和高度的 div 的寬度和高度。這可以確保 div 始終佔據最大空間，而不會破壞寬高比。為了防止 div 溢出，我們也使用比率值來設定 max-height 和 max-width 約束。

為了使 div 垂直和水平居中，我們使用position:absolute並將其定位在頂部，視窗的底部、左側和右側邊緣。這可以確保無論螢幕尺寸如何，div 都保持居中。

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 */
}

此解決方案適應不同的螢幕尺寸，同時保持所需的 16:9 寬高比。垂直或水平調整視窗大小，div 也會相應調整，佔據最大空間，不出現捲軸或變形。

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