防止通过浏览器放大缩小图像来调整图像大小javascript

Question

我是 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>

Answer 1

删除 css 属性 background-size: cover； 因为当您更改窗口大小（以适应容器）时，它会调整您的图像大小

来源

防止通过浏览器放大缩小图像来调整图像大小javascript

问题描述

1 个解决方案

解决方案1
0 2019-11-23 06:16:40

防止通过浏览器放大缩小图像来调整图像大小javascript

问题描述

1 个解决方案

解决方案1 0 2019-11-23 06:16:40

解决方案1
0 2019-11-23 06:16:40