これは、画像のEXIF/TIFFメタタグと関係がある可能性があります。
これらのタグの1つは、画像の向きを示します。サーバーにアップロードする写真(iPhoneなど)にはこれらのタグが付いているものと、ないもの(別のソース/ワークフローからのもの)があります。サーバーはこれらのタグを保持する場合と保持しない場合があり、画像の正しい向きを試みるためにタグを読み取る場合と読み取らない場合があります。同様に、Webブラウザはこれらのタグに注意を払う場合と払わない場合があります。タグを含む画像をアップロードすると、結果は確実に予測できなくなります。
これが問題であるかどうかを確認する良い方法は、サーバーから「問題のある」イメージと「良い」イメージをダウンロードして、それらを比較することです。それらをプレビューで開き、インスペクターの2番目のタブを確認します。メタ情報が表示されます。一方の画像に向き情報があり、もう一方にはないかどうかを確認します。どちらもメタ情報を表示しない場合は、サーバーがメタ情報をすべて削除して使用していない可能性が高く、この回答を忘れることができます。
また、異なるブラウザで比較する必要があります。一部のブラウザはこの向きの情報を読み取り、それに応じて画像を回転させますが、そうでないブラウザもあります。
たとえば、ポートレートモードで撮影された私のiPhoneの写真には、次のメタタグがあります。
- ピクセルの高さ:2,448
- ピクセル幅:3,264
- 向き:6(回転90°CCW)
ネイティブのビットマップの向きは横向きです。
'orientation'メタタグは、画像読み取りソフトウェアが縦向きに回転して表示されることを示します。
メタタグは、画像を「正しく」縦向きに回転させるために(一部の)画像ソフトウェアによって使用されますが、画像を横向きとして表示する他のソフトウェアでは無視されます。
状況は混乱を招き、これに関する確立された基準はありません(タグは単なるヒントです)。したがって、オンライン出版用の画像を準備する場合、アップロードする前にこれらのタグを取り除き、画像を正しいBITMAP方向に物理的に回転させるのが最も安全です。 。アプリのサーバー側を作成している場合は、サーバー上でこれを行うことができます。ただし、方向メタタグを使用せずに、正しいBITMAP方向で画像をWebブラウザに配信することが重要です。
どうしてこれなの?今日でも、ブラウザが異なればメタタグへのアプローチも異なります。
先ほど触れたiPhoneの画像は次のように表示されます
。GoogleChrome24ポートレート
Safari6 ポートレート
Firefox17ランドスケープ
Opera12ランドスケープ
素晴らしい状況ではありません!