Html 如何在网页上正确放置图像，而不考虑窗口大小？

我有两个屏幕——笔记本电脑屏幕和扩展电视屏幕

当我通过笔记本电脑屏幕查看我的网页时，我看到了这一点

但是，当我通过电视更改缩放或查看网页时，它看起来是这样的

为了清晰起见，我希望无论窗口大小，我的图像都处于相同的位置。因此，Android图片应始终位于联系人按钮下方

这些图像是通过CSS生成的，如下所示。我相信HTML代码是无关的，因为我只是声明了链接。（这些图像实际上是可点击的）

#恢复{/*我的名字图像*/
背景图片：url（Resume_Button.png）；
职位：亲属；
显示：块；
边框：25em实心#FF0004；
高度：22em；
边缘顶端：10em；
溢出：隐藏；
文本缩进：200%；
空白：nowrap；
宽度：31em；
}
#继续：悬停{
边框：1em实心#FF0004；
}
#个人_项目{/*安卓按钮*/
背景图片：url（android-logo2.png）；
职位：固定；
背景位置：右；
显示：块；
高度：18em；
边缘顶部：1.5em；
左侧边缘：55 em；
边框：0.25em实心#FF0004；
溢出：隐藏；
空白：nowrap；
宽度：20em；
}
#个人项目：悬停{
边框：1em实心#FF0004；
}

---

非常感谢您的帮助

以像素而不是em来写入边距、高度和宽度属性值。

您说的“在同一位置而不考虑大小”是什么意思<代码>位置：相对和

位置：绝对或使用百分比？根据您的需要，您可能必须使用JavaScript。请澄清这个问题。你的问题是你将元素定位在某一点上。无论屏幕大小如何，该点都是相同的。这就像在一张纸上画一个点，向下2英寸，向上4英寸。如果纸张为8.5x11和4.25x5.5，如果要将图像始终定位在同一位置，则圆点将不会“在同一位置”。。使用百分比值，如：
left:50%
等@PHPglue我的意思是，无论浏览器窗口大小，定义“相同位置”。左右两边都一样吗？从上到下都一样吗？相同的百分比，从左到右？这将不起作用，因为它仍然是硬编码的。切换到像素不会解决此问题
   #Resume{ /* The MY Name Image */
 background-image: url(Resume_Button.png);
postion:relative;
display: block;
border: .25em solid #FF0004;
height:22em;
margin-top:10em;
overflow: hidden;
text-indent: 200%; <!--For Removing the hyperlink (Not Clean) --> 
white-space:nowrap;
width: 31em;   
}

#Resume:hover{
 border: 1em solid #FF0004;
}


#Personal_Projects{ /* Android Button */
background-image:url(android-logo2.png);
postion:fixed;
background-position:right;
display: block;
height:18em;
margin-top:1.5em;
margin-left:55em;
border: 0.25em solid #FF0004;
overflow:hidden;
white-space:nowrap;
width:20em; 
}

#Personal_Projects:hover{
border: 1em solid #FF0004; 

}