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

Question

我的身高为1108像素，身高为907像素。我将此图像保存在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从右），图像应该是像GOOGLE MAPS一样拖拽图像。我已经尝试了偏移，但问题是我的图像停止拖动。 谢谢你试图帮助我。

Answer 1

是否需要成为图像元素？将它作为div的background-image并使用background-position来移动它可能会更容易。

如果你坚持使用img元素，你也可以使用边距，但为了省去一些麻烦，我会使用绝对定位。