Scaling issue while creating responsive components


I am creating a map view component. I have an image as a map with marker icons and other navigation icons placed over the map image. These icons have absolute positioning

When I am increasing the Map view frame diagonally (for responsive design) - the vehicle icon in the center does not change its position wrt to the map however the marker icon on the left bottom isn’t resizing wrt to the map.

both icons have center,center constraints

Is there a way to place icons over the image and make them sticky to the image?

I would wrap an image with a frame and set image to scale. Then I would place smaller frames all over the map, these would be icon placeholders. Again, these should scale too so when you resize the parent frame the map should scale with all of the placeholders staying in the right place. And lastly, I would put icons inside placeholders with center-center constraints.