16:9纵横比应用程序和背景(计算Nav占用的空间)
16:9纵横比应用程序和背景(计算Nav占用的空间)
提问于 2019-11-08 07:08:38
好的，我正在为IOS / Android创建一个简单的游戏，我在设备间的布局一致性上遇到了一些问题。
我的新假设是，如果我以16:9的比例开发布局，它将对大多数/所有设备都有很好的扩展性。我已经实现了在游戏的外部包装上保持这个比率，但是游戏区域也是一个16:9的背景图像，我无法适当地缩小这个比例来填充“游戏区域”。
为此，假设页面顶部有30 to，底部有30 to用于导航，这意味着“游戏区域”的高度为100% -60 to，宽度为100%，这将导致问题。尽管背景图像是16:9的比例，该区域不再是一个16:9的帆布区域。
我的尝试：
- 将图像更改为删除60 to ->，这严重失败
- 把背景图像集中在“游戏区域”上，这还不算太糟糕，但我们在边路上损失了很多空间。背景100%的内部DIV
- 使用画布强制图像进入区域，但是事情变得模糊了：使用画布的背景
- 将背景图像移动到外部包装器/主体。这看起来真不错！但我失去了60 by的图像，仍然是由NAV覆盖。在这里看到：背景100%的包装，即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>
回答 1
Stack Overflow用户
发布于 2019-11-08 11:04:43
正如您已经注意到的，不可能将图像的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58761969
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号