3

When an image is styled with CSS to grow or shrink to occupy available space in the container DIV, what steps must be taken to keep the image-map area coordinates in sync with the changing image size? 

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

Does the plugin's scaleMap: true property handle this scenario? Or must additional steps be taken? I haven't been able to get it to work using scaleMap alone, but perhaps I'm misunderstanding what scaleMap does. Does it handle situations where the user drags the browser window wider or narrower, and changes in orientation on a tablet device?

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

4

3 回答 3

8

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

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

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

“如何让图像映射自动适应浏览器窗口的大小？

该代码基本上捕获和缓冲调整大小事件，然后调用 ImageMapster 的resize方法作为响应。这可能会成为下一个版本的原生特性，所以你可以使用比例 css；现在您可以复制示例中的技术。

于 2013-05-24T13:47:34.287 回答
1

只是原始答案的补充（绝对正确）。

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

有人喜欢这个：

 // Resize the areamap to fit within the boundaries provided
        var resizeTime   = 100;     // total duration of the resize effect, 0 is instant
        var resizeDelay  = 100; 
        var originalMaxWidthMap  = image.outerWidth(); // addedum
        var originalMaxHeightMap = image.outerHeight(); // addedum
        function resize(maxWidth,maxHeight) {
            let imgWidth = image.width(),
            imgHeight = image.height(),
            newWidth=0,
            newHeight=0;

            if (imgWidth/maxWidth>imgHeight/maxHeight) {
                if (maxWidth > originalMaxWidthMap) { // addedum
                    newWidth = originalMaxWidthMap; // addedum
                } else {
                    newWidth = maxWidth;
                }
            } else {
                if (maxHeight > originalMaxHeightMap) {  // addedum
                    newHeight = originalMaxHeightMap; // addedum
                } else {
                    newHeight = maxHeight;
                }
            }
            image.mapster('resize',newWidth,newHeight,resizeTime);   
        }

于 2020-11-17T15:39:10.037 回答
0

存在一种维护原始形式的解决方案

   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);
于 2016-11-11T19:54:07.787 回答