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>