画像タグ内で画像が上下逆さまに表示されるのはなぜですか?

画像タグ内の画像の向きの不一致

画像タグを使用して画像を Web ページに組み込む場合、画像の向きが一貫していることが期待されます元の状態のまま。ただし、シナリオによっては、画像タグに表示された後、画像が上下逆さままたは斜めに表示される場合があります。この問題に対処するために、潜在的な原因を調査し、解決策を提供します。

提供された例は、Web ブラウザーでは正しく表示される画像を示していますが、画像タグの src 属性に割り当てられると反転します。この差異は、画像の方向を指定する画像内に埋め込まれたメタデータによって発生します。これに対処するために、CSS では image-orientation プロパティを導入しています。

CSS 解決策: image-orientation

次の CSS 宣言を追加することで、画像の正しい方向を設定できます。 be Restore:

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

このプロパティは、画像ファイル自体に含まれるメタデータを優先するようブラウザに指示し、画像が意図した向きで表示されるようにします。このプロパティに対するブラウザのサポートはさまざまであり、Firefox と iOS Safari ではこのプロパティが信頼できる結果で実装されていることに注意することが重要です。 Safari や Chrome などの他のブラウザでは、このプロパティを使用すると依然として問題が発生する可能性があります。

ブラウザが進化し続けるにつれて、画像の向きのサポートが拡大し、すべてのブラウザでシームレスで一貫した画像表示エクスペリエンスが提供されることが予想されます。異なるプラットフォーム。

以上が画像タグ内で画像が上下逆さまに表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。