Javascript 在简单jquery缩放插件中居中显示图像

我正在尝试编写一个非常简单的缩放插件，它应该只有一个按钮来放大、缩小，还有平移功能来移动图像

现在，我已经写了放大和缩小的部分

我的问题是，我找不到一种方法将图像放在zoombox的中心

这是我目前的代码：

$.fn.zoom = function() {

    var img = this;

    img.attr("style", "-ms-transform: scale(1); -ms-transform-origin: 0% 0%; -webkit-transform: scale(1); -webkit-transform-origin: 0% 0%").wrap('<div style="width: 400px; height: 400px; overflow: hidden;" class="zoombox" data-scale="1"></div>');


    $("body").on("click.zoom", ".zoomin, .zoomout", function() {

        if( $(this).hasClass("zoomin") ) {
            var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
        } else {
            var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
        }


        img.parent().attr("data-scale", zoomFactor);
        console.log(zoomFactor);

        img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")"});        
    });

  };

小提琴：

我知道这种风格不是最好的，但我只是想让它工作起来，而不考虑代码的风格

如何将图像居中放置在长方体中，并认为以后必须应用平移效果才能更改变换原点值

PS：我现在只关心Chrome和IE9的兼容性。

编辑以供评论

你说得对。在这里，我已更新以使用transform origin。它获取包含div的维度并除以2以获得包含div的中心点，并将其传递到图像的css transform origin属性中：

我用不同尺寸的图像进行了测试，效果很好

原创的

根据放大还是缩小，需要使用左边距和右边距顶部移动图像

由于要将图像的比例增加1%，因此需要相应地移动边距，负数表示放大，位置表示缩小

$("body").on("click.zoom", ".zoomin, .zoomout", function() {
    var imgWidth = $(img).width();
    var imgHeight = $(img).height();
    var scaleWidth = Math.floor(imgWidth * 0.01);
    var scaleHeight = Math.floor(imgHeight * 0.01);       

    if( $(this).hasClass("zoomin") ) {
        var zoomFactor = (Number(img.parent().attr("data-scale")) + 0.1).toFixed(1);
        moveLeft -= scaleWidth;
        moveTop -= scaleHeight;


    } else {
        var zoomFactor = (Number(img.parent().attr("data-scale")) - 0.1).toFixed(1);
        moveLeft += scaleWidth;
        moveTop += scaleHeight;
    }
    console.log(moveTop);
        console.log(moveLeft);

    img.parent().attr("data-scale", zoomFactor);
    console.log(zoomFactor);
        img.css({"-webkit-transform": "scale(" + zoomFactor + ")", "-ms-transform":"scale(" + zoomFactor + ")", "marginLeft": moveLeft, "marginTop": moveTop});        
});

---

使用“变换原点”（transform origin）会根据比例将图像居中，但您也会使用“溢出隐藏”（overflow hidden）隐藏部分图像，这会带来一些新的挑战，无论如何->谢谢，但该行为不是我需要的，它应该开始居中并保持居中，如果我从XY位置开始，XY位置应该保持在同一个坐标上，我只是玩了一会儿，它不起作用，但也许它给了你一个如何处理这个问题的提示。不幸的是，我现在没有时间让它工作。谢谢，这个例子可以工作，但是如果我使用不同分辨率的图像，它就不能工作。也许我必须根据图像的大小设置起始边距？