javascript - 如何在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)并且图像应该是 像谷歌地图一样拖动图像。我已经用偏移量试过了，但问题是我的图像停止拖动了。谢谢你试图帮助我。

Answer 1

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

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