How to determine click coordinates on original image in img with object-fit: contain?

Question

PHP

There is an image on the page with an undefined real size (1280x800 for example). I need to get the coordinates of the click on the original. Everything seems to be simple: this.naturalWidth / this.offsetWidth * event.offsetX.
But this only works if the size of the img element is equal to the size of the image after scaling. But in this case, object-fit does not work. For it to work, you need to stretch the img by 100%, but then offsetWidth, offsetHeight do not give the desired effect. How can I solve this problem?

Answer 1

The specified code works for me as expected, the data is sent by a POST request.
I advise you to check Function.php for errors
while debugging comment out location.href = 'Vyzi.php'; or replace it with alert/console.log
and add an error callback, by analogy with success
, also try to open the developer console in the browser (F12), go to the Network tab and see what is sent and what is returned in response

Answer 2

option ...

$(function() {
    $("img").click(function(event) {
        var nh = this.naturalHeight,
            nw = this.naturalWidth,
            p = nw / nh,
            h = Math.min(this.scrollHeight, this.scrollWidth / p),
            w = h * p,
            t = (this.scrollHeight - h) / 2,
            d = (this.scrollWidth - w) / 2,
            x = event.offsetX,
            y = event.offsetY;
        if (x >= d && x <= d + w && y >= t && y <= t + h) {
            x -= d;
            x *= nw / w;
            x = Math.round(x);
            y -= t;
            y *= nh / h;
            y = Math.round(y);
            alert([x, y])
        }
    })
});