调整图像大小时如何调整图像映射的坐标？

Question

在我的一个管理页面中，我有以下div：

<div class="row">
    <div class="col-lg-12">
        <a href="#" id="btnCreateSelector">Mark Image area</a>
    </div>
    <div class="col-lg-12">
        <div id="canvas" style="position:relative;width:800px;">
            <img src="img/1324_2041.jpg" style="width:100%;height:auto;" class="img-responsive" />
        </div>
    </div>
</div>

现在＆＃39; btnCreateSelector＆＃39;单击时，创建一个可伸展的叠加div，主要用于选择图像上稍后用作图像热点的区域。此叠加div还包含保存按钮以保存捕获并保存所选区域的坐标。

$('#btnCreateSelector').click(function() {
    var guid = $.fn.genUID();

    var string = '<div id="' + guid + '" data-id="'+ guid +'" class="area area-unsaved" style="box-sizing: content-box;top: 0; left: 0; width: 140px; height: 140px;">';

    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnSave btn btn-info btn-xs" title="Save"><span class=" glyphicon glyphicon-floppy-save"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnEdit btn btn-warning btn-xs" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnDelete btn btn-danger btn-xs" title="Delete"><span class="glyphicon glyphicon-remove"></span></a>  ';
    string += "</div>";
    $("#canvas").append(string);
    $(".area").resizable({
        handles: "n, e, s, w, nw, ne, sw, se",
        minHeight: 1,
        minWidth: 1,
    }).draggable();
});

$(document).on("click", ".btnSave", function (e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    curr_div_id = id;

    var t = parseFloat($("#" + id).css("top"));
    var l = parseFloat($("#" + id).css("left"));
    var w = parseFloat($("#" + id).css("width"));
    var h = parseFloat($("#" + id).css("height"));

    $.ajax({
        url:"<?=site_url();?>pm/maparea/add/",
        type:"POST",
        data: {m_top: t, m_left: l, m_width: w, m_height: h},
        success: function (response) {
            if(response == '1')
            {
                alert('success');
            }
        },
        error: function(response) {
            alert(response);
        }
    });
});

在一个公众可以访问的页面中，我显示上面的图像（1324_2041.jpg），上面有图像热点。

<div id="vas">
    <img src="<?=site_url();?>assets/admin/uploads/pages_img/1324_2041.jpg" usemap="#article_map"  class="img-fluid" />
    <map name="article_map">
        <area shape="rect" coords="137.025,327.20625,581.175,556.36875" href="#" alt="Sun">
    </map>
</div>

现在，从这里我的问题开始。从数据库获得的坐标不会与预期的图像部分重叠。他们在桌面视图或平板电脑视图或移动设备上关闭。请告诉我哪里出错了。我抓了坐标正确吗？如何在调整图像大小时捕获或调整坐标？