ビデオの 187 フレームを重ね合わせた画像があります。各フレームは幅 320 ピクセル、高さ 180 ピクセルで、画像は幅 320 ピクセル、高さ 33660 ピクセルになります。画像へのリンク: http://reference.23.rekab.dk/7340/2758266/3f1faedac540f10a4bfe20ea579da3e7/video_frames/download/izotope-stutter-edit-frames.jpg
この画像を使用して、一度に 1 つのフレームを表示し、各フレームを幅と高さの 2 倍にスケーリングします。これを達成するために、div
640px x 360px の測定値内に画像を配置し、表示するフレームに応じてoverflow: hidden;
単純に負の値を与えるように画像を絶対に配置しました (したがって、最初のフレームを表示するには、値は 0 です。 5 番目のフレームを表示するには、値を-360 * (5 - 1) = -1440 ピクセルに設定します。top
top
top
これは、フレーム番号 183 に到達するまで正常に動作し、画像top
に -65520px の値を与えます: サイズ変更された画像は、Chrome によって 65535 ピクセルで切り取られているように見えるため、そのフレームを完全に表示できません。残りのフレームまったくない: http://jsfiddle.net/kkabell/tm6ZM/3/
jpeg 画像の最大の高さが 65535 ピクセルであることは知っていますが ( http://en.wikipedia.org/wiki/Jpegを参照)、Firefox と Safari の両方で画像をこれよりも高い高さにスケーリングできます。
- これは Chrome で予想される動作ですか?それを回避する方法はありますか?
- この「制限」が文書化されている場所はありますか?
- 他のブラウザではどのような動作が予想されますか?
私のテストでは、OS X 10.8.2 で Google Chrome 25.0.1364.172 を使用しています。