移动设备上的完整背景图像，通过拖动视图端口移动整个图像答案

【问题标题】：Full background image on mobile, move around entire image by dragging view port移动设备上的完整背景图像，通过拖动视图端口移动整个图像
【发布时间】：2018-01-12 04:15:43
【问题描述】：

我有一张地图的图片

在移动设备上，我想被带到该地图的特定部分（例如非洲）并通过捏合在整个地图上移动。

我的 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 在 Chrome 上通过按住 shift + 鼠标单击来拖动。

确保您在 devtools 上的移动视图上进行测试。

【问题讨论】：

你有什么可能img size like 4 * 4和你div size is 4 * 8如果有可能你可以使用background-size:100% 100%但是img看起来像有弹性
@lalitbhakuni 很有趣。无论如何我可以保持纵横比不变，但只在移动设备上显示一小部分图像？基本上我不需要一次看到整个图像，但我应该能够四处走动。

标签： html css mobile responsive-design

【解决方案1】：

我认为你需要java script 来移动背景图片

我找到了解决办法。

**感谢@banzomaikaka ** Using Mouse Drag To Control Background Position

演示http://jsfiddle.net/VRvUB/854/

【讨论】：

谢谢老兄！不幸的是，我可能需要 javascript，但我猜不管用什么。我会将这个问题保持几个小时，看看是否有更优雅的解决方案。感谢您的贡献。
没有……你需要 JS……没有它就不可能……CSS 不允许你需要的条件逻辑……意思是 if(condition){做某事。 ..}

【解决方案2】：

您需要在 HTML 文件的头部使用这个元标记：试试这个：

<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>

【讨论】：

你还不能捏缩放？
试试这个：
不，没有修复。我可以捏和缩放。但我不能捏住整个图像。图像被裁剪为整个地图的一部分（按第二张图片）。如果我放大已经裁剪的图片，我可以捏一下。谢谢
好的，我现在了解您的问题了...抱歉，仅使用 CSS 无法满足您的要求...您需要条件逻辑...您对 JavaScript 的熟悉程度如何？如果根本没有 - 帮不了你......