如何使此图像地图元素具有响应性？

Posted 2023-05-08

【中文标题】如何使此图像地图元素具有响应性？

【英文标题】：How can I make this image map element be responsive?

【发布时间】：2020-03-09 14:50:01

【问题描述】：

我使用 Genially 以这张图片为背景创建了这张地图——查看this link。

问题是我必须使此地图具有响应性，以便可以从低分辨率设备访问它。我考虑过使用transform: scale(2); 缩放元素并添加一些可以将其拆分的javascript，但考虑到缩放功能的工作方式，它无法按预期工作。

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

【问题讨论】：

transform + margin 可能会做：看这支带有媒体查询的笔 codepen.io/gcyrillus/pen/AJHmt 方法已经在官方网站上使用多年了。不涉及js

【参考方案1】：

display: none 在媒体查询中的大图像上如何，并将图像分割成多个部分并逐个显示它们。

或在模板中使用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">