How can I map Elements size and position to other Elements size and position on resize

So I’ve run into a problem trying to make objects on a image clickable.
I have an Image with 3 Objects that I want to link to 3 different pages / execute 3 different functions onclick.

Now my problem occurs when I resize my window. The Image having the following style to always display the objects, even if I resize the window and fill up the entire screen.

img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: calc(100vh - 90px);
}

Since the objects are pretty big and when I resize, to let’s say mobile view, the links will overlap and be bigger then the screen itself.

Now my question is, would it be possible to kinda map the buttons sizes and positions to the image, that the rescale automatically, or would i need to use media-queries to achieve that?

I was thinking of tracking the initial scale of the image someone and applying that to the links with transform: scale();, maybe?

Using JS is fine, since it is a vue 3 application.