如何调整 IMG 元素的大小，使其在窗口大小更改时按比例位于窗口上的同一位置？

Question

我正在尝试创建一个类似 GPS 的应用程序，但我在尝试在地图上创建“禁止进入”区域时遇到了困难。 我试图根据窗口大小调整地图大小，并使用最大屏幕宽度和高度的百分比来绘制禁止区域。 问题是当我改变屏幕大小时，地图上点的相对位置会发生变化。 我现在不太担心地图的失真，而不是让它在各种窗口大小上工作。

我目前的CSS：

#map-container {
    display:flex;
    justify-content: center;
}

#lower-map {
    position:absolute;
    transform: rotate(-37.7deg);
    top:25%;
    max-width:50%;
    max-height:50%;
}

HTML：

<div id="map-container">
    <img src="/static/images/Lower.jpg" alt="Map of lower floor" id="lower-map">
</div> 

当前用于标记禁止区域的 javascript 仅适用于我的屏幕尺寸，并且仅适用于全屏：

let screenHeight = $(window).height();
let screenWidth = $(window).width();

$('#dot1').css({left: screenWidth*(60.62499999999999/100)-1, top: screenHeight*(35.75240128068303/100)-1});
$('#dot2').css({left: screenWidth*(51.69642857142858/100)-1, top: screenHeight*(43.54322305229456/100)-1});
$('#dot3').css({left: screenWidth*(55.98214285714286/100)-1, top: screenHeight*(50.160085378868736/100)-1});
$('#dot4').css({left: screenWidth*(64.55357142857143/100)-1, top: screenHeight*(42.58271077908218/100)-1});

每个百分比都是通过点击地图找到的：

(evt.pageX/$(window).width())*100

预先感谢您的帮助！

Answer 1

我没有答案，所以我会在这里发布我的工作。 我把图像做得很大，并关闭了页面滚动，这样设备的大小就无关紧要了，gps 的功能也一样。