全屏响应式全景图答案

【问题标题】：Fullscreen responsive panoramic image全屏响应式全景图
【发布时间】：2013-12-18 22:32:36
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

你有没有试过把你的图片放在一个 div 中。宽度和高度为 100%，并将 div 的高度设置为 100% 并使用溢出：滚动？
可见，你可以通过使用 background-size jsfiddle.net/vyfjV/1987654321@来改变图像比例
与其扫描网站和论坛寻找现成的解决方案，何不尝试运用一些创造性思维和想象力，亲自尝试一下呢？至少，在尝试中，您会发现完成工作需要哪些技术和组件，并且您应该能够在互联网上找到有关那些的信息。你现在只是在应用过于广泛的推理。

【解决方案1】：

如果我了解您想要什么，那么您真的不需要为此编写脚本。
This very basic example 应该适用于任何现代浏览器，并且可能是一个好的开始。
它仅使用一个 <img> 元素和以下 CSS：

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

【讨论】：

【解决方案2】：

如果它不需要使用 jQuery，你可以看看 using three.js 来获得一个不错的panoramic effect。我链接的示例可以很容易地调整为包含一个仅旋转相机的滚动条，尽管在图像上单击和拖动比拖动滚动条更好的交互形式。如果您的全景图像不是 360x180，您还可以限制相机旋转。

【讨论】：