Responsive design 使用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的功能。它是否能处理用户将浏览器窗口拉得更宽或更窄，以及平板电脑设备方向改变的情况

---

文档不太清楚<代码>缩放贴图将缩放图像贴图以匹配最初渲染的图像大小。所以使用css，比如

width:200px；高度：400px显示一个实际大小不是该大小的图像将正常工作，并调整图像贴图的大小

但是，它不会在页面最初加载后处理用户启动的缩放事件。所以css类
宽度：100%不是一个好主意。它将在第一次加载时调整图像贴图，但如果用户调整视口大小，则不会发生任何事情。其目的是处理未按其原始尺寸显示的图像，而不是响应性设计

但是，可以在响应式设计中使用ImageMapster，但需要告诉它何时调整图像大小。在“演示”页面的“摆弄”下有一个例子：

“如何使imagemap调整到浏览器窗口的大小
自动地


当用户调整大小时

代码基本上捕获并缓冲调整大小事件，然后调用ImageMapster的
resize
方法作为响应。这可能在下一个版本中成为本机功能，因此您可以只使用比例css；现在您可以复制示例中的技术。
存在一个用于维护原始表单的解决方案

   var time = 300;     
   var resizeDelay = 100;   
   var savedWidth = $('img').width();
   var savedHeigth = $('img').height(); 
   var savedWindowWidth = $(window).width();
   var savedWindowHeight = $(window).height();
   function resize(newWinWidth, newWinHeight) {          
       var newImgWidth = 0;
       var newImgHeight = 0;
       newImgWidth = (newWinWidth * savedWidth) / savedWindowWidth;  
       if($(window).height< savedWindowHeight){
           newImgHeight = (newWinHeight * savedHeigth) / savedWindowHeight;
       }
       if (savedWindowWidth === $j(window).width()) {
           $('img').mapster('resize', savedWidth, savedHeigth, time);
       }
       else {
           $('img').mapster('resize', newImgWidth, newImgHeight, time);
       }
   }
   function onWindowResize() {
       var curWidth = $j(window).width(),
               curHeight = $(window).height(),
               checking = false;
           if (checking) {
               return;
           }
           checking = true;
           window.setTimeout(function () {
               var newWidth = $(window).width(),
                  newHeight = $(window).height();
               if (newWidth === curWidth &&
                   newHeight === curHeight) {
                   resize(newWidth, newHeight);
               }
               checking = false;
           }, resizeDelay);
   }
   $(window).bind('resize', onWindowResize);

var时间=300；
var resizeDelay=100；
var savedWidth=$（'img'）.width（）；
var savedHeigth=$（'img'）.height（）；
var savedWindowWidth=$（window.width（）；
var savedWindowHeight=$（window.height（）；
函数调整大小（newWinWidth，newWinHeight）{
var newImgWidth=0；
var newImgHeight=0；
newImgWidth=（newWinWidth*savedWidth）/savedWindowWidth；
if（$（窗口）.height
只是原始答案的补充（绝对正确）

尝试放置一个图像大小限制器，该限制器在加载地图时接收地图的原始大小。此“技巧”可避免在某些情况下过度缩放原始图像。例如，如果地图嵌入到WP builder的列中

有些人喜欢这个：


//调整areamap的大小以适应提供的边界
var resizeTime=100；//调整大小效果的总持续时间，0是即时的
var resizeDelay=100；
var originalMaxWidthMap=image.outerWidth（）；//addedum
var originalMaxHeightMap=image.outerHeight（）；//addedum
函数调整大小（maxWidth、maxHeight）{
设imgWidth=image.width（），
imgHeight=image.height（），
newWidth=0，
newHeight=0；
如果（imgWidth/maxWidth>imgHeight/maxHeight）{
if（maxWidth>originalMaxWidthMap）{//addedum
newWidth=originalMaxWidthMap；//addedum
}否则{
newWidth=maxWidth；
}
}否则{
如果（最大高度>原始最大高度映射）{//addedum
newHeight=originalMaxHeightMap；//addedum
}否则{
newHeight=maxHeight；
}
}
mapster（'resize'，newWidth，newHeight，resizeTime）；
}
Hi Jamie，我将此解决方案应用于一个实例，使用“altImages”进行高亮显示和选择，在这种情况下，调整大小后，在原始图像下方会有图像的副本。。。