Get absolute x,y of a child from the relative x,y of the parent

Note the following structure:


HTML:










CSS:
body {
padding: 100px;
background: aqua;
}

.container {
position: relative;
padding: 0 !important;
touch-action: none;
-webkit-user-select: none;
user-select: none;
width: 400px;
height: 400px;
border: 2px solid black;
}

.wrapper {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 0 !important;
overflow: hidden;
background-color: black;
}

.image {
position: relative;
max-width: none !important;
max-height: none !important;
pointer-events: none;
width: 100%;
height: 100%;
transform: translate(var(--translate-x, 0px), var(--translate-y, 0px)) scale(var(--scale, 0));
--scale: 2;
--translate-x: 170px;
--translate-y: -100px;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: red;
}



If you prefer, here is the JSFiddle link.


When I click on the parent (.wrapper element) I will get an x,y. Let's suppose I click on the top right corner (in the example it would be close to the dog's eye). The value I should get relative to this element is something close to (x: 300, y: 0).


However, if we consider the real image (which has dimensions 1000x500) we know that this click region (the dog's left eye) corresponds to x:505 and y:205 (approximately).


What I want is precisely that. From the 5 variables:



* X of the click (relative to parent)

* Y of the click (relative to parent);

* CSS attribute --scale;

* CSS attribute --translate-x;

* CSS attribute --translate-y;






Get the absolute x, y of the image (considering its real size).


Comments:




The image can be moved within the container. For this I am using the Zoomist plugin. It was the only plugin I found that did this behavior of being able to zoom and move the image within a container of a pre-fixed size.


If there is another solution (another plugin for example) that would be better for my purpose, it would be welcome. Basically it all comes down to being able to zoom and move an image within a region and when clicking on a region (that is part of the image) I get its real x,y.