Question

我是javascript新手，我正尝试在其中创建一个游戏。我已经放置了图像，但是当我调整浏览器的大小（例如使用CTRL +或CTRL-放大和缩小）时，图像的位置和大小也会随之变化。我想固定图像的位置和大小。我正在尝试在Google上找到答案，但还没有找到适合我的方法。任何帮助，将不胜感激。我想修复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：封面；因为当您更改窗口大小（以适合容器）时，这会调整图像的大小

Source

禁止通过浏览器放大javascript缩小图像大小

1 个答案: