I have the following issue:

I need to place some hot areas over an image that are clickable. The hot areas are normal divs positioned in a container over an image. The image is a background of the container and has object-fit: contain, and width: 100%, so it does not always fit perfectly inside the container (this is fine). I need to place the hot area and then when I scale up or down the container eg. change width and height that will also change the aspect ratio, I need to readjust the buttons so they are positioned on the exact same spot again! All units for the buttons (width, height, X, Y) are in percentages.

I am attaching photos:

1. The phone frame is with size: 1067px x 480px

2. The phone frame is with size: 640px x 360px The buttons should be positioned on the correct spot