jquery图像映射大小调整

我编写这个函数是为了重新调整onLoad元素的位置，如果用户调整浏览器窗口的大小。它在加载时正常工作，但在调整窗口大小时无法正确重新计算。我做错了什么

var orig_width = jQuery("#imageMaps").attr("width");    

        function sizing() { 

              var pic = jQuery('#imageMaps');

              var curr_width =  pic.width();      

              if (orig_width > curr_width) {    
                var width_ratio = orig_width / curr_width;
              }

              else if (orig_width < curr_width) {
                  var width_ratio = curr_width / orig_width;
              }

              var width_ratio_dec = parseFloat(width_ratio).toFixed(2);        alert(width_ratio_dec);

            jQuery("area").each(function() {
            var pairs = jQuery(this).attr("coords").split(', ');
            for(var i=0; i<pairs.length; i++) {
                var nums = pairs[i].split(','); 
                for(var j=0; j<nums.length; j++) { 
                    if (orig_width > curr_width) {
                        nums[j] = nums[j] / width_ratio_dec; 
                    }
                    else if (orig_width < curr_width) {
                        nums[j] = nums[j] * width_ratio_dec; 
                    }
                    else if (orig_width == curr_width) {
                        nums[j]
                    }

                }
                       pairs[i] = nums.join(',');
            }
            jQuery(this).attr("coords", pairs.join(', '));
            }); 
        }

        jQuery(document).ready(sizing);
        jQuery(window).resize(sizing);

var orig_width=jQuery（#imageMaps”）.attr（“width”）；
函数大小调整（）{
var pic=jQuery（'#imageMaps'）；
var curr_width=pic.width（）；
如果（原始宽度>当前宽度）{
可变宽度比率=原宽度/当前宽度；
}
否则如果（原宽度<当前宽度）{
可变宽度比率=当前宽度/原始宽度；
}
var width_ratio_dec=parseFloat（width_ratio）.toFixed（2）；alert（width_ratio_dec）；
jQuery（“区域”）。每个（函数（）{
var pairs=jQuery（this）.attr（“coords”）.split（'，'）；
对于（var i=0；i来说，比率的计算似乎基于img的原始宽度，而坐标的重新计算基于当前坐标。您应该捕获原始坐标（可能在多维数组中）更改大小和映射后，要对照检查或重置原始宽度的大小。
窗口大小调整事件不会调整图像大小。似乎在WindowResize上，您希望调整图像大小，然后用新计算绘制点。
我假设您同时调整图像大小如果不是的话，这是一个毫无意义的代码，但这是一个整洁的和（我相信）你发布的工作版本

var orig_width = 0;

function sizing() { 
    if (orig_width == 0) return;

    var pic = $('#imageMaps');
    var curr_width =  pic.width();      
    var ratio = curr_width / orig_width;

    $("area").each(function() {

        var pairs = $(this).attr("coords").split(', ');

        for(var i=0; i<pairs.length; i++) {

            var nums = pairs[i].split(','); 

            for(var j=0; j<nums.length; j++) { 
                nums[j] = nums[j] * ratio; 
            }

            pairs[i] = nums.join(',');
        }
        $(this).attr("coords", pairs.join(","));
    }); 
    orig_width = curr_width;
}

$("#imageMaps").one("load", function() {
    orig_width = $("#imageMaps").attr("width");    
    $(window).resize(sizing);
}).each(function() {
    if (this.complete) $(this).load();
});

var orig_width=0；
函数大小调整（）{
if（orig_width==0）返回；
var pic=$（“#图像映射”）；
var curr_width=pic.width（）；
var比率=当前宽度/原始宽度；
$（“面积”）。每个（函数（）{
var pairs=$（this.attr（“coords”）.split（'，'）；
对于（var i=0；i，这个小猪背弃了提供的答案

在我的例子中，我不仅需要调整图像映射的大小，还需要同时调整图像的大小以匹配容器

//resize image map on jobs page
        var mapWidth = $("div#main").width();

        $("#imageMaps").one("load", function() {
            orig_width = $("#imageMaps").attr("width");   
            $("#imageMaps").attr("width", mapWidth);
            sizing();
        }).each(function() {
            if (this.complete) $(this).load();
        });

设置变量（当浏览器调整大小时）之后，如果您
console.log（curr_width）；
得到了什么？谢谢，但这只在调整大小后起作用，而不是在加载时起作用。我通过添加：jQuery（document）.ready（size）；
//resize image map on jobs page
        var mapWidth = $("div#main").width();

        $("#imageMaps").one("load", function() {
            orig_width = $("#imageMaps").attr("width");   
            $("#imageMaps").attr("width", mapWidth);
            sizing();
        }).each(function() {
            if (this.complete) $(this).load();
        });