Javascript 移动重叠的16:9纵横比图像并调整其大小
已解决（我认为）--见下文 快速背景：对于一个简单的IOS游戏，我有16:9的背景区域，我将图像漂浮在上面，需要融入背景。为此，我需要它们随背景调整大小并随背景移动 假设：我将游戏区域保持在16:9，因为我认为这将与各种设备进行良好的扩展。如果我也让需要在背景上浮动的图像16:9，它们应该以相同的速率缩放，并提供稳定的%比例来移动它们 测试：我有一个1280x720的背景区域，有一个256x144（20%）的切片。我有一张256x144的图像，我正试图覆盖这一部分，它有时可以工作，但对调整大小的响应并不总是很好，或者在各种设备上无法对齐。我的数学有什么错误吗 代码如下：Javascript 移动重叠的16:9纵横比图像并调整其大小,javascript,html,css,Javascript,Html,Css,已解决（我认为）--见下文 快速背景：对于一个简单的IOS游戏，我有16:9的背景区域，我将图像漂浮在上面，需要融入背景。为此，我需要它们随背景调整大小并随背景移动 假设：我将游戏区域保持在16:9，因为我认为这将与各种设备进行良好的扩展。如果我也让需要在背景上浮动的图像16:9，它们应该以相同的速率缩放，并提供稳定的%比例来移动它们 测试：我有一个1280x720的背景区域，有一个256x144（20%）的切片。我有一张256x144的图像，我正试图覆盖这一部分，它有时可以工作，但对调整大小的
- 解决- 我错误地假设浮动图像的宽度和它需要移动的百分比是基于窗口宽度的百分比（与容器DIV的情况一样），以保持其16:9的比率，但当容器的16:9比率在小于屏幕宽度时最大时出现错误的结果。我真正想要的是嵌套在容器中的图像，并使用父对象的%而不是窗口！真不敢相信我错过了几个小时
身体{
保证金：0；
填充：0；
}
#游戏包装{
宽度：100vw；
高度：计算（100vw*9/16）；
保证金：自动；
填充：0；
位置：绝对位置；
顶部：0；底部：0；/*垂直中心*/
左：0；右：0；/*水平中心*/
边框：1px纯红；
背景：淡蓝色url（'https://i.imgur.com/BFCIQuw.png“）居中/不包含重复；
}
#游戏区{
保证金：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）；
}
}
.建筑物位置{
宽度：计算值（100vw*.2）；
高度：计算（100vh*.2）；
保证金：0；
填充：0；
文本对齐：居中；
字体大小：粗体；
边框：1px实心#000；
}
#建筑物1{
保证金：0；
填充：0；
浮动：左；
位置：绝对位置；
左：计算值（100vw*.40）；
顶部：计算值（100vh*.20）；
}
#建筑物1 img{
保证金：0；
填充：0；
宽度：计算值（100vw*.20）；
高度：计算（100vh*.20）；
}
测试游戏布局
这是最顶级的GUI/NAV
这是最底层的GUI/NAV