imgタグの向きが間違っているように見える 質問する

imgタグの向きが間違っているように見える 質問する

このリンクに画像があります: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

おすすめ記事