オンラインでは画像の向きが正しいにもかかわらず、HTML では画像が逆さまに表示されるのはなぜですか?

HTML での画像の向きの不一致のトラブルシューティング

問題:

指定されたリンクから取得した画像が表示されると上下逆に表示される を使用してtag.

分析:

画像リンクを調査すると、画像が通常の向きであることが明らかです。ただし、 のソース属性としてリンクを設定すると、タグを使用すると、提供された JSFiddle コード スニペットに見られるように、画像は上下逆さまにレンダリングされます。この方向の不一致の原因は何なのかという疑問が生じます。

解決策:

徹底した調査により、部分的な解決策が発見されました。現代の画像には、写真の意図された向きを定義するメタデータが組み込まれていることがよくあります。これに対処するために、画像の向きに特化した新しい CSS 仕様が導入されました。次の CSS ルールをスタイルシートに組み込むことで、画像の向きの問題を軽減できます:

<code class="css">img {
    image-orientation: from-image;
}</code>

ブラウザのサポート:

2016 年 1 月 25 日現在、サポートされています。この CSS ルールは、Firefox と iOS Safari (プレフィックスの背後にあるとしても) に限定されます。ただし、一部のユーザーは、Safari と Chrome で進行中の問題を報告しています。モバイル Safari は、明示的な CSS タグを必要とせずに画像の向きを本質的にサポートしているようであることは注目に値します。

将来の展望:

サポートを実装する責任はブラウザ開発者にあります。 image-orientation プロパティでは、異なるブラウザ間で一貫した画像の方向を確保します。それまでは、特定のブラウザで画像の向きが異なる場合があります。

以上がオンラインでは画像の向きが正しいにもかかわらず、HTML では画像が逆さまに表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。