Html “自动调整图像大小”；全屏；手机中的浏览器栏和选项卡覆盖了modal

我正在尝试建立一个显示图像的全屏“模式”。我通过创建一个具有最大高度和宽度的div来创建模型，给它一个大的z索引和固定位置

在该模型中，我放置了一个图像。我正在尝试使用此css自动调整图像大小：

.center{
宽度：100%；
对象匹配：包含；
身高：100%；
}

这在桌面上有效，但在移动设备上，浏览器地址栏、选项卡和其他控件通常与需要用户滚动查看的内容重叠。我的图像是否可以放在可用空间内，并且不需要滚动就能完全可见？我需要解释浏览器可能占用的额外空间（可能是填充还是边距），而只是考虑它丢失了？在我的实际实现中，我们希望禁用滚动，因为这是一种全屏模式（使用react scrolllock）

下面是我的示例代码，也可以在这里找到：

并作为github页面承载：

.满{
右：0；
底部：0；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：固定；
z指数：12348；
边界：0；
保证金：0；
背景：#22222；
}
.中心{
宽度：100%；
对象匹配：包含；
身高：100%；
}

您可以使用对象拟合标记。试着这样做：

<style>
.center {
    display: block;
    position: relative;
    width: 100%;
    object-fit: contain;
}

.中心{
显示：块；
位置：相对位置；
宽度：100%；
对象匹配：包含；
}

---

移动浏览器在使用视口单元时会故意这样做，以防止在UI移动时不断重新呈现布局。更多信息