我目前正在努力想要建立一个可以在不同分辨率下工作的网站。主导航是通过需要填充大部分视口的图像映射。我知道这已经过时了但是图像映射似乎是允许多边形区域划分的唯一非Flash解决方案 - 我喜欢爱一个替代方案！
我最终设法让网站调整大小以允许主图像使用条件jQuery＆amp; CSS，但这也调整了slickboxes中的文本大小，看起来很糟糕！
该网站（非常未完成）是here。我知道导航还不完全清楚（将鼠标悬停在上面并点击颜色），但我想先对此问题进行排序。
我的问题，总结：
非常感谢 - 整个周末一直把头发拉出来！
答案 0 :(得分：2)
修改：百分比方法不起作用。
在这种情况下，我唯一能看到的就是这样：
使用百分比表示法形成形状：
<area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">
在第一次抽奖和每个窗口调整大小时：
解析每个区域的mycoords属性
将百分比分成四个整数
根据图片.width()属性计算百分比
根据如此计算的像素值设置区域的coords属性
并非完全无足轻重，但经验丰富的jQueryist应该很容易实现这一点。
旧回答：
嗯。那么你有一个需要动态调整大小的imagemap吗？
我自己从未尝试过这个，但是如何使用相对坐标=
<area shape="rect" coords="1%,3%,25%,29%">
不知道这是否有效，但值得一试。
答案 1 :(得分：1)
它有点受限，但你可以用HTML / CSS做不规则的形状。
你应该能够根据你的目的调整其中一个。
修改
关于图像大小调整，您需要在CSS中使用相对宽度，而不是以像素为单位对其进行硬编码
事实上，有一个灵活的框架可能已经为您解决了很多问题： Check out CSS Grid
答案 2 :(得分：0)
流体设计中热点的另一个解决方法是使用Edge Animate中的链接制作响应式静态图像。 然后，热点（或充当热点的层）完全响应。缺点是当从Edge输出时，50kb的图像大约为120kb。说过这是一个非常快速的工作。