如何使图像仅在移动模式下全屏显示？

Question

有两个网站模板，桌面（已经可以）和移动。

在移动设备中，我希望它只显示占据整个屏幕的图像。显示的所有扩展（高度和宽度）都必须是这个内容。按下按钮后，页面向下并显示内容。

示例：

我在 Fiddle jsfiddle.net/gtw7375/yrmbsfhu/做一个例子

但我不知道如何将图像居中并将其保留为占据整个高度/页面高度的独特内容。

如何做到这一点？

Answer 1

创建一个设置为 100vw 和 100vh 的块元素。然后将图像添加为具有属性的背景图像：背景大小：封面。