css 尺寸填满显示屏

如何在网页中使用 CSS 将元素的尺寸等比例缩放以填满整个显示屏幕？以下是一些可行的方法：

html, body {
      height: 100%;
}
.element {
      width: 100%;
      height: 100%;
      object-fit: contain;
}
    

这段 CSS 代码中，我们将 html 和 body 元素的高度设置为 100%。接下来，我们在需要缩放的元素中添加了一个类名为 element，并将其宽度和高度都设置为 100%。最后，我们使用了 object-fit: contain; 属性，让元素的内容在等比例缩放后，填充整个容器。

还有一种更简单的方法，就是使用 Vh 和 Vw 这两个单位。

.element {
      height: 100vh;
      width: 100vw;
}
    

这种方法也非常简单，使用 100vh 和 100vw 把元素的高度和宽度都设置为了整个显示屏幕的大小。

无论使用哪种方法，都可以让我们的网页在不同尺寸和比例的显示屏幕上都能完美显示。如果您对这方面不太熟悉，可以到 W3Schools（https://www.w3schools.com/cssref/css_units.asp）上学习相关的 CSS 单位。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！