使用imageMapster调整响应式图像映射:我是否误解了scaleMap的作用？

当使用CSS设置图像来增大或缩小以占据容器DIV中的可用空间时,必须采取哪些步骤来保持图像 - 地图区域坐标与不断变化的图像大小同步？

img {
    /*  border: 2px dotted red; */
    width:100% !important;
    max-width: none !important;
    height: auto !important;
}
div {width: 100%; height: auto}

插件的scaleMap: true属性是否处理这种情况？或者必须采取其他措施？我单独使用scaleMap无法让它工作,但也许我误解了scaleMap的作用.它是否处理用户拖动浏览器窗口更宽或更窄,以及平板设备方向更改的情况？

http://jsfiddle.net/juvyh/1309/

文档不完全清楚.scaleMap将缩放imagemap以匹配最初渲染的图像大小.因此,使用css width: 200px; height: 400px;来呈现实际上不是那么大小的图像将正常工作,并调整图像映射的大小.

但是,它在初始加载页面后不处理用户启动的缩放事件.所以css width: 100%;就不是一个好主意.它将在第一次加载时调整图像映射,但如果用户调整视口大小,则不会发生任何事情.目的是处理未以原始尺寸显示的图像,而不是响应式设计.

但是,您可以在响应式设计中使用ImageMapster,但您需要告诉它何时调整图像大小.在"演绎它"下的"演示"页面上有一个例子:

"如何让imagemap自动调整到浏览器窗口的大小？

用户调整大小时调整地图大小

代码基本上捕获并缓冲调整大小事件,然后调用ImageMapster的resize方法作为响应.这可能会成为下一版本的本机功能,所以你可以使用比例css; 现在你可以在示例中复制该技术.