如何在用 CSS 填充整个屏幕的同时保持宽高比？

在 CSS 中填充屏幕宽度和高度时保持宽高比

问题：
创建 div 元素具有固定的宽高比，填充整个屏幕的宽度和高度而不超过其

解决方案：
利用CSS视口单位vw和vh来设置div的尺寸。

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

解释：

• 视口单位： vw 和 vh 相对于视口宽度的测量单位和高度。
• 方面比率： 高度设置为宽度的 56.25%，保持恒定的 9:16 纵横比。
• 最大尺寸： 使用 max 将元素限制在视口尺寸内-height 和 max-width。
• 居中： 位置属性居中使用 top:0 在屏幕上垂直和水平放置元素；底部：0；左：0； right:0;.

结果：

div 元素会扩展以填充可用屏幕空间，而不会破坏其宽高比，无论设备的方向或方向如何屏幕尺寸。

以上是如何在用 CSS 填充整个屏幕的同时保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！