我目前非常头疼，试图让我正在构建的网站能够跨多种分辨率工作。主要导航是通过需要填充大部分视口的图像映射。我知道这已经完全过时了，但图像映射似乎是唯一允许多边形区域定界的非 Flash 解决方案——不过我希望有一个替代方案！
我最终设法让网站调整大小以允许使用条件 jQuery 和 CSS 在较小的监视器上显示主图像，但这也调整了 slickboxes 中的文本大小，这看起来很糟糕！
该网站（非常未完成）在这里。我知道导航还不完全清楚（悬停并单击油漆颜色），但我想先解决这个问题。
我的问题，总结一下：
非常感谢——整个周末都在拔头发！
编辑：百分比方法不起作用。
在那种情况下，我唯一能看到的是这样的：
有使用百分比符号的形状：
<area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">
在第一次绘制和每个窗口调整大小时：
解析每个区域的mycoords属性
将百分比拆分为四个整数
根据图像的.width()属性计算百分比
coords根据这样计算的像素值设置区域的属性
不完全是微不足道的，但这应该由经验丰富的 jQueryist 轻松实现。
老答案：
唔。所以你有一个需要动态调整大小的图像映射？
我自己从未尝试过，但是使用相对坐标呢=
<area shape="rect" coords="1%,3%,25%,29%">
不知道这是否有效，但值得一试。
它有点有限，但你可以用 HTML/CSS 做不规则的形状。
您应该能够根据您的目的调整其中之一。
编辑：
关于图像大小调整，您需要在 CSS 中使用相对宽度，而不是以像素为单位进行硬编码
事实上，有一个灵活的框架可能已经为您处理了大部分问题： 查看 CSS Grid。
流体设计中热点的另一种解决方法是在 Edge Animate 中制作带有链接的响应式静态图像。然后热点（或充当热点的层）完全响应。缺点是从 Edge 输出时 50kb 的图像大约为 120kb。话虽如此，这是一个非常快速的工作。