How do I resize an IMG element so that it is proportionately in the same place on the window when the window size changes?

Question

I am trying to create a GPS-like application, and I am very stuck trying to create the 'no-go' zones on the map. I am trying to have the map resize based on the window size, and use percentage of the max screen width and height to map out the no-go zones. The problem is that when I am changing the size of the screen, the relative position of the points on the map change. I am less worried about distortion of the map right now than I am on getting this to work on various window sizes.

My current 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> 

The javascript currently being used to mark no-go area, only works on my screen size, and only if its full screen:

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});

Each of those percentages were found by clicking on the map with:

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

Thank you in advance for your help!

Answer 1

I got no answer, so I'll post my work around here. I made the image very large, and turned off page scroll, so that it didn't matter the size of the device, and the gps functions the same.