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

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

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

CSS ソリューション: image-orientation

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

img {
    image-orientation: from-image;
}

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

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