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

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

問題：

問題：建立 div元素具有固定的寬高比，填滿整個螢幕的寬度和高度而不超過其
解決方案：利用CSS視口單位

vw

和vh來設定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 */
}

CSS實作：

• 解釋：
• 視口> vw 和vh 相對於視口寬度的測量單位和高度。
• 方面比率： 高度設定為寬度的 56.25%，保持恆定的 9:16 縱橫比。

最大尺寸：

使用 max 將元素限制在視窗尺寸內-height 和 max-width。

居中：

位置屬性居中使用top:0 在螢幕上垂直和水平放置元素；底部：0；左：0； right:0;.

結果：div元素會擴展以填滿可用螢幕空間，而不會破壞其寬高比，無論裝置的方向或方向如何螢幕尺寸。

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