Reposition and rescale clickable item on top of image when window resizes

So I want to create a Image that has rectangular clickable areas on top of it. I also need these areas to have a color so they can indicate a status. They also should be kind of transparent, so you can see whats on the image behind it. This all works perfectly fine, but now I also want to make it responsive.

The problem is, that if I make the image scaleable, the custom div's that represent the areas just stay in place and don't change size.

<div class="map-container">
    <img class="image1" src="SOME_IMAGE" >

    <div class="visibleItem" *ngFor="let item of items"
        /*The default positions for 100% scaling are saved in a document*/
        [ngStyle]="{
        'left': item.posX + 'px',
        'top': item.posY + 'px',
        'width': item.width + 'px',
        'height': item.height + 'px'
        }"
        /*The code below basically changes the background color of the partly transparent item*/
        [class.served]="item.served === true" 

        (click)="doSomething()"
        >
        {{item.name}}
    </div>
</div>

I would appreciate being able to resize the image and the items according to the windowsize.

Solution

you're positioning your divs with px values, therefore it's not responsive:

so let's say your img has a width of 200px and your div is at left:40px and everything looks fine.
but when you resize your img and it has a width of 120px your div still sits at left:40px which makes it non-responsive.

you could fix that by positioning it with percentage values (those are relative to the width and height of map-container, so you need to set what you need there too)

Since it's currently not visible how you're styling your components or handle the resize, i can't give you a more in-depth answer, but this should get you into the right direction