将图像保持在特定位置，即使调整窗口大小也是如此

Question

所以我做了一个工作正常的网站(http://hltvnewsgenerator.com/previewavatar/(，但是当我自己改变窗口的分辨率时，它会将图像移动到某个不需要的位置。

我想知道如何将图像绑定到特定位置，即使窗口正在调整大小。

我的代码：

.HTML：

<img :src="image" id="steamprofile">

.CSS：

#steamprofile {
width: 166px; 
height: 166px; 
position: absolute; 
z-index: 1; 
left: 487px; 
top: 463px;
}

Answer 1

问题是你使用position: absolute，然后准确指定香蕉应该在哪里。这当然会破坏除您正在测试的分辨率之外的所有其他分辨率的设计。

您可以将图像包装在div(或任何其他元素(中，这样绝对定位将相对于该div(包装 img 的div(。我要做的是将背景图像作为包装div 的背景图像，然后将香蕉图像放入该div 并保持绝对位置：

div {
background-image: url(https://i.ibb.co/2Kjvf6f/steam-Profile.png);
width: 977px;
height: 226px;
}
div > img {
position: absolute;
left: 487px;
width: 166px;
height: 166px;
}

<div>
<img src="https://bananagaming.tv/images/bananagaming_logo.png">
<div>

Answer 2

这是我的解决方案，将其粘贴到您的HTML中，您必须将css放在外部。

<div style="position: relative">
<img src="steamProfile.png" alt="img">
<img src="https://bananagaming.tv/images/bananagaming_logo.png" id="steamprofile" style=" left: 110px; top: 23px; "></div>