html - 图片无法在移动设备上缩放

Question

我有这张图片，您可以在移动视图中放大：

但是，用户不能捏缩放/四处移动以查看视口之外的图像。

有没有人有解决这个问题的建议？

这是要测试的页面：https ://offsideornot.com/offside/west-bromwich-albion-vs-southamption_WfPbYBUvZlhDPvN4lp1x

我认为user-scalable=yes在这里添加<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>会有所帮助，但它没有。

标签： htmlcssresponsive-design

Answer 1

我能想到的最简单的例子是让图像采用它的“自然”尺寸，但将它放在一个更小的容器中——即不要做任何正常的事情，比如让对象适合：覆盖或包含。通过这种方式，用户可以获得可用的最佳清晰度，可以在其容器内移动图像并可以缩放。

当然，对于实际的网页，在没有用户与图像交互的情况下，您可能希望更多的图像以“静态”状态显示。我不知道具体是什么要求。在小型设备上，也许可以让用户选择使用整个屏幕来查看图像（在缩放之前），因为这种使用（点球）需要尽可能清晰的定义。

这是开始的简单片段：

.container {
  width: 300px;
  height: 200px;
  overflow: auto;
  margin: 50px;
}
img {
  position: relative;
}

<div class="container">
  <img src="https://i.stack.imgur.com/RxX4s.jpg" />
</div>