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

Question

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

但是用户无法pinch-zoom/move查看视口外的图像。

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

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

Answer 1

我能想到的最简单的示例是让图像采用其 'natural' 尺寸，但将其放在较小的容器中 - 即不要做任何正常的事情，例如适合对象: 覆盖或包含。通过这种方式，用户可以获得可用的最佳清晰度，可以在其容器内移动图像并可以缩放。

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

这是开始的简单片段：

.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>

Image not scalable on mobile