我是 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;因为当您更改窗口大小时(以适合容器)会调整图像大小
关于javascript - 使用浏览器放大缩小javascript防止图像大小调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59004850/