javascript - 移动图像时的 Javascript/CSS 平移图像问题

Question

我在容器中有图像，我添加了平移放大/缩小。一切正常，但只有一个问题。当我使用鼠标将图像从左侧移动到右侧时。它没有完全在右侧移动，图像的某些部分仍然隐藏在容器的左侧，我的意思是图像应该像向上/向下和向左移动一样边到边移动。

请检查并提出最佳解决方案。

var start_zoom = 2.0;
$("#imgpos").simplePan({
    css:{},
    centerImage: false,
    mousewheel: true,
    zoomAnimate: true,
    initialZoom: start_zoom,
    minZoom: start_zoom,
    maxZoom : 10*start_zoom,
    zoomDelta : 0.10,
});

#imgpos{
    width:460px;
    height:184px;
    background:#ccc;
    display:block;
    margin:auto;
    overflow:hidden;
}
#imgpos > img{
    height: 100%;
    width: auto;
    display:block;
    margin:auto;
    position: relative;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    transition: 500ms;
    transform-origin: center top 0px;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://dev.vsjodha.com/pan-script.js"></script>
<div class="set-imagebox" id="imgpos">
<img id="drag-image" src="http://dev.vsjodha.com/RadWraps/tower.jpg">
</div>

标签： javascriptjquerypan