移动设备上的完整背景图像,通过拖动查看端口在整个图像周围移动

我有一张地图的图像

在手机上,我想被带到地图的一个特定部分(比如非洲),然后通过捏来绕着整个地图移动。

我的CSS在这里:

main {
  background-image: url("map.jpg");
  /* Full height */
  height: 100vh; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

然而,在手机上,我发现:

我捏不动地图。我该怎么做?

你可以 simulate 通过按住shift键并单击鼠标,在Chrome上的视图端口上拖动。

确保在devtools上的mobile view上进行测试。