フルスクリーンのレスポンシブパノラマ画像-jquery、フルスクリーン

パノラマ画像は幅6400ピクセルx高さ1080ピクセルです。

私は「Jqueryに基づいてさまざまなスクリプトを試してきましたが、自分の目的に合わせてカスタマイズすることはできませんでした」。

画像を高さ100％で表示したい画面サイズの変更、ウィンドウのサイズが変更されたときに再スケーリングしますが、同時に、水平スケールをそのまま残し、下部にスクロールバーを置いて画像のサイズ全体に沿って水平に移動します。

これを行う方法はありますか？…

ウェブサイトやフォーラムで見つけることができませんでした。

ありがとう！

回答：

私があなたが望むものを理解していれば、そのためのスクリプトは本当に必要ないはずです。
この非常に基本的な例 最新のブラウザで動作するはずであり、良いスタートになる可能性があります。
使用するのは1つだけです <img> 要素と次のCSS：

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

jQueryを使用する必要がない場合は、three.jsを使用して見やすくすることができます。 パノラマ効果。私がリンクした例は、簡単に適応できますカメラを回転させるだけのスクロールバーが含まれていますが、画像をクリックしてドラッグすると、スクロールバーをドラッグするよりもはるかに優れた操作が可能になります。パノラマ画像が360x180でない場合は、カメラの回転を制限することもできます。