16:9 宽高比应用程序和背景（考虑导航占用的空间）
Posted
技术标签:
【中文标题】16:9 宽高比应用程序和背景（考虑导航占用的空间）【英文标题】：16:9 Aspect Ratio App & Background (Accounting for space taken by the Nav) 【发布时间】：2019-11-08 07:08:38 【问题描述】：好的，我正在为 ios / android 创建一个简单的游戏，但在跨设备布局的一致性方面遇到了一点问题。
我的新假设本质上是，如果我以 16:9 的比例开发布局，它将适用于大多数/所有设备。我已经实现了游戏外包装上的比例保持，但游戏区域也是 16:9 比例背景 图像，我无法正确缩小以填充“游戏区域”
为此，我们假设导航页面顶部有 30px，底部有 30px，这意味着“游戏区域”的高度为 100% - 60px，宽度为 100%，这会导致问题。尽管背景图像是 16:9 的比例，但该区域不再是 16:9 的画布区域。
我的尝试：
-
将图像更改为 60 像素 -> 这非常失败
将背景图像置于“游戏区域”的中心，这还不错，但我们会在侧面失去很多空间。 Background 100% of inner DIV
使用画布强制图像进入该区域，但事情变得模糊：Background Using Canvas
将背景图像移动到外部包装器/主体。这实际上看起来相当不错！但是我丢失了 60 像素的图像仍然被 NAV 覆盖。在这里看到：Background 100% of wrapper that is 16:9
关于如何获得更好结果的任何其他想法？
这是当前代码：
#Game_Wrapper
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
padding: 0;
border: 1px solid red;
background: lightblue url('https://i.imgur.com/tRFltCI.png') 0 0/contain no-repeat;
#Game_Area
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
#GUI_Top
margin: 0;
padding: 0;
height: 30px;
background: grey;
#GUI_Top p
margin: 0;
padding: 0;
text-align: center;
#GUI_Bottom
margin: 0;
padding: 0;
height: 30px;
background: grey;
#GUI_Bottom p
margin: 0;
padding: 0;
text-align: center;
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh)
#Game_Wrapper
height: 100vh;
width: calc(100vh * 16 / 9);
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>【问题讨论】：
在您的示例Background 100% of inner DIV 上，您是否尝试过background-size 属性是cover 而不是contain？
是的，所以背景尺寸的封面会切断图像，我需要整个东西都可以看到，这就是我尝试将它强制放入画布中的原因，尽管尺寸很大。跨度>
【参考方案1】：
正如您已经注意到的那样，不可能将 16:9 的图像比例保持在一个也是 16:9 并具有其他元素的容器内。
我的建议是用图像的扩展名填充剩余空间，这样我们可能会认为它是同一张图像。
这是它应该看起来的近似值。我只是用相同的图像填充了空白空间，但模糊了。我们的想法是找到好的模式，使其在视觉上更好：
#Game_Wrapper
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
border: 1px solid red;
#Game_Area
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
background: url('https://i.imgur.com/tRFltCI.png') center/contain no-repeat;
position:relative;
overflow:hidden;
#Game_Area:before
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
z-index:-1;
background:
url('https://i.imgur.com/tRFltCI.png') right/contain no-repeat,
url('https://i.imgur.com/tRFltCI.png') left/contain no-repeat;
filter:blur(8px);
#GUI_Top
margin: 0;
padding: 0;
height: 30px;
background: grey;
#GUI_Top p
margin: 0;
padding: 0;
text-align: center;
#GUI_Bottom
margin: 0;
padding: 0;
height: 30px;
background: grey;
#GUI_Bottom p
margin: 0;
padding: 0;
text-align: center;
/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh)
#Game_Wrapper
height: 100vh;
width: calc(100vh * 16 / 9);
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>【讨论】：
以上是关于16:9 宽高比应用程序和背景（考虑导航占用的空间）的主要内容，如果未能解决你的问题，请参考以下文章
OpenGL ES 2.0：投影矩阵和宽高比之间的联系是什么？