How can I make this image map element be responsive?

Question

I use Genially to create this map with this picture as its background — check this link .

The issue is that I have to make this map responsive, so that it can be accessible from lower resolution devices. I've thought about scaling the element using transform: scale(2);and adding some JavaScript that would split it so to speak, but it doesn't work as intended given how the scale function work.

The map isn't in an iFrame, it's rendered on my website.

Answer 1

1. How about display: none on the big image in media queries and slicing the image up into sections and displaying them one by one.

2. or using srcset in the template to display different image sizes on screen resize. https://html.com/attributes/img-srcset/ .

<img srcset="
  /filepath/flamingo4x.jpg 4025w,
  /filepath/flamingo3x.jpg 3019w,
  /filepath/flamingo2x.jpg 2013w,
  /filepath/flamingo1x.jpg 1006w
 " src="/filepath/flamingo-fallback.jpg">