全屏响应全景图像

Question

我有6400像素宽x 1080像素高的全景图像。

我一直在尝试基于Jquery的不同脚本，但我无法为我的目的自定义它们。

我希望图像以100％的屏幕尺寸高度显示，当窗口大小改变时重新缩放，但同时保持水平刻度不变，底部有一个滚动条可以移动水平整个图像大小。

有没有办法做到这一点？...

我在任何网站或论坛都找不到。

谢谢！

Answer 1

如果我明白你想要什么，你就不应该真的需要一个脚本 This very basic example应该适用于任何现代浏览器，并且可以是一个良好的开端 它只使用一个<img>元素和以下CSS：

html, body, img {
  margin: 0;
  padding: 0;
  height: 100%;
  display: block;
}

Answer 2

如果它不需要使用jQuery，你可以看一下使用three.js来获得一个不错的panoramic effect。我链接的示例可以很容易地适应包括只旋转相机的滚动条，尽管单击并拖动图像是一种比拖动滚动条更好的交互形式。如果全景图像不是360x180，也可以限制相机旋转。