Javascript 16:9宽高比App&；背景（考虑导航占用的空间）

好的，我正在为IOS/Android创建一个简单的游戏，我在跨设备布局的一致性方面遇到了一些问题

我的新假设是，如果我以16:9的比例开发布局，它将适合大多数/所有设备。我已经实现了保持游戏外包装上的比例，但游戏区域也是一个16:9比例的背景图像，我无法适当缩小比例以填充“游戏区域”

为此，我们假设页面顶部有30px，底部有30px用于导航，这意味着“游戏区域”的高度为100%-60px，宽度为100%，这就导致了问题。尽管背景图像的比例为16:9，但该区域不再是16:9画布区域

我的尝试：

将图像更改为关闭60px->此操作失败严重

将背景图像集中在“游戏区域”上，这并不太糟糕，但我们在侧面损失了很多空间

使用画布强制图像进入该区域，但会变得模糊：

将背景图像移动到外部包装器/主体。这个看起来真不错！但是我丢失了60像素的图像，仍然被导航覆盖着。如图所示：

关于如何获得更好的结果还有其他想法吗

这是当前代码：

#游戏包装器{
宽度：100vw；
高度：计算（100vw*9/16）；
保证金：自动；
位置：绝对位置；
顶部：0；底部：0；/*垂直中心*/
左：0；右：0；/*水平中心*/
填充：0；
边框：1px纯红；
背景：淡蓝色url（'https://i.imgur.com/tRFltCI.png'）0/不包含重复；
}
#游戏区{
保证金：0；
填充：0；
宽度：100%；
高度：计算（100%-60px）；
}
#桂冠{
保证金：0；
填充：0；
高度：30px；
背景：灰色；
}
#图普{
保证金：0；
填充：0；
文本对齐：居中；
}
#圭乌底{
保证金：0；
填充：0；
高度：30px；
背景：灰色；
}
#桂皮{
保证金：0；
填充：0；
文本对齐：居中；
}
/* 100 * 16/9 = 177.778 */
@介质（最小宽度：177.778vh）{
#游戏包装{
高度：100vh；
宽度：计算（100vh*16/9）；
}
}

这是最顶级的GUI/NAV

这是最底层的GUI/NAV

正如您已经注意到的，不可能将图像的16:9比例保持在一个同样为16:9且包含其他元素的容器中

我的建议是用图像的扩展来填充剩余的空间，这样我们可能会认为它是同一个图像

这是它应该是什么样子的近似值。我只是用同样的图像填充了空白，但模糊了。想法是找到好的图案，使其视觉效果更好：

#游戏包装器{
宽度：100vw；
高度：计算（100vw*9/16）；
保证金：自动；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
填充：0；
边框：1px纯红；
}
#游戏区{
保证金：0；
填充：0；
宽度：100%；
高度：计算（100%-60px）；
背景：url（'https://i.imgur.com/tRFltCI.png“）居中/不包含重复；
位置：相对位置；
溢出：隐藏；
}
#游戏区：之前{
内容：“；
位置：绝对位置；
顶部：-10px；
左：-10px；
右：-10px；
底部：-10px；
z指数：-1；
背景：
url（'https://i.imgur.com/tRFltCI.png“）右/不包含重复项，
url（'https://i.imgur.com/tRFltCI.png'）左/不包含重复；
过滤器：模糊（8px）；
}
#桂冠{
保证金：0；
填充：0；
高度：30px；
背景：灰色；
}
#图普{
保证金：0；
填充：0；
文本对齐：居中；
}
#圭乌底{
保证金：0；
填充：0；
高度：30px；
背景：灰色；
}
#桂皮{
保证金：0；
填充：0；
文本对齐：居中；
}
/* 100 * 16/9 = 177.778 */
@介质（最小宽度：177.778vh）{
#游戏包装{
高度：100vh；
宽度：计算（100vh*16/9）；
}
}

这是最顶级的GUI/NAV

这是最底层的GUI/NAV

在您的示例中，

背景100%内部DIV

，您是否尝试了

背景大小

属性是

封面

而不是

包含

？是的，因此背景大小上的封面会切断图像，我需要整个内容都可以查看，这导致我尝试将其强制放入画布，尽管大小不同。