如何使此图像 map 元素响应？

Question

我使用 Genially 创建了这个 map，并以这张图片为背景——查看这个链接。

问题是我必须让这个 map 响应，以便可以从较低分辨率的设备访问它。 我考虑过使用transform: scale(2);缩放元素并添加一些 JavaScript 可以这么说，但考虑到 function 的工作方式，它不能按预期工作。

map 不在 iFrame 中，它呈现在我的网站上。

Answer 1

1. display: none ，并将图像分割成多个部分并逐个显示。

2. 或在模板中使用srcset在屏幕调整大小时显示不同的图像大小。 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">