Javascript DIV内的定心图像未给出预期位置

我已经成功地使用JavaScript和css将我的图像居中。我遇到的问题是，居中图像的坐标不是我所期望的。顶部和左侧值不是相对于包含div的顶部和左侧的，而是表示图像的精确中心。这是我的代码，我将粘贴在我的代码中。我需要知道帧的确切顶部和左侧，以便计算服务器端的偏移量

Html:

JavaScript:

$(function () {
    var frameTop = 0;
    var frameLeft = 0;

    $('#imgFrame').each(function () {
        imgheight = Math.round($(this).height() / 2);
        imgwidth = Math.round($(this).width() / 2);
        $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
    });

    var pos = $('#imgFrame').position();
    $('#framePos').val("Top: " + pos.top + " Left: " + pos.left);
    frameTop = pos.top;
    frameLeft = pos.left;

    $("#drag_resize").resizable({
        aspectRatio: true,
        resize: function (event, ui) {
            $('#imgSize').val("W: " + ui.size.width + " H: " + ui.size.height);
        },
        handles: 'e,w,n,s'


    }).draggable({
        drag: function (event, ui) {
            $('#imgPos').val("Top: " + (ui.position.top) + " Left: " + (ui.position.left));
            $('#imgPosCalc').val("Top: " + (ui.position.top - frameTop) + " Left: " + (ui.position.left - frameLeft));

        }
    });

    $('#imgSource').css({
        'width': '200px',
        'height': '200px;'
    })
});​

---

我添加了一个函数来计算帧的真实顶部和真实左侧位置：

function getTrueXY(){
        var img = document.getElementById('imgFrame'); 
        //or however you get a handle to the IMG
        var fameWidth= img.clientWidth;
        var frameHeight= img.clientHeight;

        var container = document.getElementById('containment-wrapper');
        var conWidth= container .clientWidth;
        var conHeight = container .clientHeight;

        var trueLeft = Math.round((conWidth / 2) - (fameWidth / 2));
        var trueTop = Math.round((conHeight / 2) - (frameHeight / 2));



    }

我也更新了

$(function () {
    var frameTop = 0;
    var frameLeft = 0;

    $('#imgFrame').each(function () {
        imgheight = Math.round($(this).height() / 2);
        imgwidth = Math.round($(this).width() / 2);
        $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
    });

    var pos = $('#imgFrame').position();
    $('#framePos').val("Top: " + pos.top + " Left: " + pos.left);
    frameTop = pos.top;
    frameLeft = pos.left;

    $("#drag_resize").resizable({
        aspectRatio: true,
        resize: function (event, ui) {
            $('#imgSize').val("W: " + ui.size.width + " H: " + ui.size.height);
        },
        handles: 'e,w,n,s'


    }).draggable({
        drag: function (event, ui) {
            $('#imgPos').val("Top: " + (ui.position.top) + " Left: " + (ui.position.left));
            $('#imgPosCalc').val("Top: " + (ui.position.top - frameTop) + " Left: " + (ui.position.left - frameLeft));

        }
    });

    $('#imgSource').css({
        'width': '200px',
        'height': '200px;'
    })
});​

function getTrueXY(){
        var img = document.getElementById('imgFrame'); 
        //or however you get a handle to the IMG
        var fameWidth= img.clientWidth;
        var frameHeight= img.clientHeight;

        var container = document.getElementById('containment-wrapper');
        var conWidth= container .clientWidth;
        var conHeight = container .clientHeight;

        var trueLeft = Math.round((conWidth / 2) - (fameWidth / 2));
        var trueTop = Math.round((conHeight / 2) - (frameHeight / 2));



    }