Javascript 如何在DIV容器的中心仅显示指定的图像坐标

我有一个1108px高和907px高的图像。我将此图像保存在div标签中，其高度和宽度如图所示

<div id="mapframe" style="overflow:hidden;height:200px;width:300px;">
<img id="image"  src="img/Groundfloor1.jpg"  height="1108px" width="907px">
</div>

现在，我不知道如何在div容器的中心仅显示我的图像的指定坐标（例如，从顶部开始显示500px，从右侧开始显示100px），该图像应该是一个像谷歌地图一样的拖动图像。我尝试过使用偏移量，但问题是我的图像停止拖动。

---

谢谢您的帮助。

它需要是图像元素吗？将其作为div的

背景图像

，并使用

背景位置

移动它可能更容易

如果您坚持使用

img

元素，也可以使用边距，但为了省去一些麻烦，我只使用绝对定位