我是javascript的新手，我正在尝试在其中创建一个游戏。我已经放置了一个图像，但是当我使用 CTRL + 或 CTRL - 调整浏览器大小(如放大和缩小(时，图像的位置和大小也会随之变化。我希望修复图像的位置和大小。我正在尝试在谷歌上找到答案，但还没有找到一个适合我的答案。任何帮助将不胜感激。我想修复 ID 为"bb1"的图像的位置和大小。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("Assets/Game_Background.png");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<title>Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg">
<button onclick="window.location.href='Main_Menu.html';" style="position: relative; ;background-
color: rgba(0,0,255,0); outline: none; border: none; opacity: 1;transform: translate(500px,220px);
width: 150px; height: 80px; "><font size="4" color="White"></font></button>
<div class="imageWrapper" style="transform: translate(700px,200px);" >
<img class="overlayImage" id="bb1" src="Assets/Marble_Blue.png" style="position: absolute; display:
block; overflow: hidden; opacity: 1; width: 26px; height: 26px; transform: translate(246px, 37px);
position: absolute;">
</div></div>
<script type="text/javascript">
</script>
</body>
</html>
删除 css 属性 background-size： cover;因为这会在您更改窗口大小(以适合容器(时调整图像大小
源