このリンクに画像があります:http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg
ご覧のとおり、これは正しい向きの通常の画像です。ただし、このリンクを画像タグの src 属性に設定すると、画像が上下逆になります。http://jsfiddle.net/7j5xJ/
<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
何が起こっているのか分かりますか?
ベストアンサー1
解決策の一部を見つけました。画像には写真の向きを指定するメタデータが含まれるようになりました。新しいCSS仕様image-orientation
。
これを CSS に追加するだけです:
img {
image-orientation: from-image;
}
2016 年 1 月 25 日現在の仕様によると、これをサポートするブラウザーは Firefox と iOS Safari (プレフィックス付き) のみです。Safari と Chrome ではまだ問題が発生しています。ただし、モバイル Safari は CSS タグなしでネイティブに方向をサポートしているようです。
ブラウザが をサポートし始めるかどうかは、待って確認する必要があると思いますimage-orientation
。