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

Question

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.

This is the current HTML Structure, which I can change.

<div>
    <img src="img/steintafelAussen.jpg" alt="Kircheneingang" />
    <div class="buttons">
        <button class="btn-1"></button>
        <button class="btn-2"></button>
        <button class="btn-3"></button>
    </div>
</div>

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?

Could I use a transparent SVG that is placed over the image, has 3 objects with eventListeners instead of links?

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