Despite my efforts to make it seamless, time constraints limited my ability to give my best shot. Nevertheless, the positioning of the pin remains relative when resizing the wrap both vertically and horizontally. I hope this information has been somewhat helpful.
Important: To prevent the pin from going outside the image boundaries when users resize the wrap to almost nonexistent dimensions, you can set restrictions on minimum width and height.
window.addEventListener('resize', positionPin);
function positionPin() {
const img = document.querySelector('img');
const pin = document.querySelector('.pin');
const imgWidth = img.clientWidth;
const imgHeight = img.clientHeight;
const pinLeft = imgWidth * 0.4; // 40% of the image width
const pinTop = imgHeight * 0.4; // 40% of the image height
pin.style.left = `${pinLeft}px`;
pin.style.top = `${pinTop}px`;
}
#wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
resize: both;
overflow: auto;
}
.pin {
width:50px;
height:50px;
background:red;
position:absolute;
left:40%;
top:40%;
}
img {
display: block;
width: 100%;
}
<div id="wrap">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg"/>
<div class="pin"></div>
</div>