Responsive img css with a twist - html

Question

I'm trying to get an image (img) to fill all available space inside a div BUT also I want the img itself to be inside an equaly sized container with position:relative so that I can place markers on the image with absolute position.
I have tried using div background-image and that works perfect except that my markers positions are out of place (of course) since the parent div is not the same size.
And with I get the markers to work perfect but then the image doesn't scale with parent container.
I need the image to behave like background-image but I also need the parent container to be same size.
Here I have 2 pens showing what I mean.
First one with background-image. pen:background-image
body { height: 90vh;
background: aliceblue;}
.page-inner {
aspect-ratio: 16 / 9;
position: relative;
padding: 1em 1em 0 1em;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
border: 1px solid black
}
.main-container {
width: 100%;
flex: 1;
padding: 2em 1em 2em 1em;
background:yellow;
}
.working-area {
position:relative;
}
.work-item {
position:absolute;
top:10%;
left:10%;
background:white;
outline: 2px solid black;
}
<div class="page-inner">
<h3 class="" >Some text</h3>
<div class="main-container">
<div class="working-area" style="height:100%;width:100%;background-position: center;background-image:url('');background-size: contain;background-repeat: no-repeat">
<div class="work-item">X</div>
</div>
</div>
<div>
<h3 class="" >Some text again</h3>
</div>
</div>
Second one with img: pen:img
body { height: 90vh;
background: aliceblue;}
.page-inner {
aspect-ratio: 16 / 9;
position: relative;
padding: 1em 1em 0 1em;
display: flex;
flex-direction: column;
align-items: center;
height:100%;
border: 1px solid black
}
.main-container {
width: 100%;
flex: 1;
padding: 2em 1em 2em 1em;
background:yellow;
}
.main-container img {
width: 100%;
height: auto;
}
.working-area {
position:relative;
}
.work-item {
position:absolute;
top:10%;
left:10%;
background:white;
outline: 2px solid black;
}
<div class="page-inner">
<h3 class="" >Some text</h3>
<div class="main-container">
<div class="working-area">
<img src="" style="" />
<div class="work-item">X</div>
</div>
</div>
<div>
<h3 class="" >Some text again</h3>
</div>
</div>
I want to combine these 2 into one :-) I need full scaling of image at the same time as I need to get image size and position relative so I can place my markers.
The image can be in any size and the screen can be resized at any time, so I need a solution that really is responsive.
thanks!
I have tried width:100%;height:auto; nad like 200 other different things. I have also started to calculate the image aspect-ratio and have a hidden img and then manually, with js, calculate each marker pos in % based on parent div size.
The solution needs to work with all img sizes and aspect ratios. Users uploads image so I don't know what sizes will come.
I have also tried to position the image with full width and height and then used transform: scale to make it fit the parent div with lots of calculations in js.
But there has to be an easier way :-)