Question

尝试制作一个用户无法调整屏幕大小/缩放屏幕而不会搞砸的游戏。我正在使用1个大背景和动态元素。目前这些元素没有缩放（它们被缩放到浏览器窗口），这很好，但将它们置于这样的位置已经是一项艰巨的任务。

所以主要目标是如果用户将鼠标悬停在图像（div）上，那么div应该以X像素向上移动。但是这些相对图像被放置在一个绝对的框中（以对窗口执行左侧和顶部css修改）

对网络的研究表示尝试负利润，但这似乎没有效果，利润率确实会变为负值，但div只会保持原样。

解决这个问题的正确方法是，这是我目前保持宽高比的jQuery代码：

Answer 1

你的问题的很大一部分是你用Javascript尝试完成的很多事情。使用CSS做得更好。

例如这些行：

$('#stadium').height($(window).height());
$('#stadium').width($(window).height()/9*16);

可以用这个CSS代替：

max-width: 1920px;
width: calc(100vh / 9 * 16);
max-height: 1080px;
height: 100vh;

＆＃34; 100vh＆＃34;是视口高度的100％。

您尝试使用Javascript完成的缩放效果最好通过在相关元素上设置padding-bottom: XX%;来完成。应根据元素的宽度设置百分比，以达到预期的比例。例如，如果您有2个元素，每个元素占其父元素的50％，那么如果您希望它们是正方形，则填充底部集合将为50％。

至于在悬停时向上移动X像素，您只需要：

.player:hover {
    backface-visibility: hidden;
    transform: translateY(-15px);
    transition: all .3s;
}

transform将元素移动到所需的方向（在这种情况下，Y轴上方15个像素），过渡使变换更平滑，backface-visibility: hidden;触发变换的硬件加速/过渡。