設計具有特定寬高比的網站時，例如16:9 的類似視頻的顯示，有必要在填滿可用螢幕空間的同時保持這個比例。此任務在確保內容居中並且永遠不會超過兩側的最大尺寸方面提出了挑戰。
應用CSS 視口單位
實用的CSS 解決方案涉及使用視口單位，vw（視口寬度）和 vh（視口高度）。這些單位允許元素相對於視口的大小調整其尺寸。透過將 div 的寬度設定為 100vw，它會擴展以填滿整個螢幕寬度。為了保持 16:9 的寬高比，高度設定為 56.25vw（計算為 9/16 * 100vw）。
限制最大尺寸
為了防止元素溢出，使用最大高度和寬度約束最大高度：100vh和最大寬度：177.78 vh（計算為16/9 * 100vh）。
定位和居中
使用絕對定位和設置在垂直和水平方向上對div 進行定位和居中頂部，底部、左和右設定為0。這可確保 div 在螢幕可用空間內保持居中。
透過組合這些 CSS 屬性，您可以建立一個保持 16:9 寬高比、同時填滿整個螢幕寬度和高度的 div 。該解決方案反應靈敏，並且可以在主要瀏覽器中一致工作，無需 JavaScript。
以上是如何保持 Div 的長寬比為 16:9 填滿整個螢幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
