在更改屏幕分辨率时使用不支持的javascript动态创建div元素

通过获取div的X和Y坐标，我在div中的鼠标点击位置添加了一个图像。它工作正常，图像被添加到鼠标点击位置。但是，当我尝试更改屏幕分辨率时，图像会移动到一些不在div中的位置。我需要设计此屏幕，以支持移动和surface的所有屏幕分辨率。有人能帮我吗。提前谢谢

这是我的工作代码：

<script language="JavaScript">
function mouseclicked(event) {
    var img = document.createElement('img')
    img.src = "Printers/printer2.jpg";
    img.width = '50';
    img.height = '50';
    img.style.position = "absolute";
    img.style.left = event.pageX + "px";
    img.style.top = event.pageY + "px";
    $('#maindiv').append(img);
}
</script>

---

在将img添加到maindiv mydiv作为maindiv元素之前，请将其添加到代码中：

var divPos = mydiv.getBoundingClientRect ();
     img.style.position = "relative";
     img.style.left = divPos.left + (event.pageX - divPos.left) + "px";
     img.style.top = divPos.top + (event.pageY - divPos.top)  + "px";

---

谢谢daksh，我试过你的代码，它支持屏幕分辨率。但是我的图像没有添加到我单击的位置。它是在距离鼠标单击位置一定距离处添加的。你能帮我一下吗。谢谢你。