Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
ユニット・関数 Widely available

image-orientation

デジタルカメラやスマートフォンで撮影された画像には、撮影時の向き情報がEXIFデータとして含まれています。image-orientationプロパティを使用すると、この情報に基づいて画像の表示方向を自動的に補正できます。デフォルト値のfrom-imageにより、ほとんどのブラウザで自動補正が有効になっています。

画像回転EXIF

概要

デジタルカメラやスマートフォンで撮影された画像には、撮影時の向き情報がEXIFデータとして含まれています。image-orientationプロパティを使用すると、この情報に基づいて画像の表示方向を自動的に補正できます。デフォルト値のfrom-imageにより、ほとんどのブラウザで自動補正が有効になっています。

対応ブラウザ

デスクトップ

Chrome 81+
Edge 81+
Safari 13.1+
Firefox 26+

モバイル

Chrome Android 81+
Safari iOS 13.4+
Firefox Android 26+

基本構文

CSS 
img {
  image-orientation: from-image;
}
.no-rotate {
  image-orientation: none;
}

実務での使いどころ

  • スマートフォン写真の自動回転補正

    アップロードされたスマートフォン写真のEXIF情報に基づいて、正しい向きで表示されるようにします。

注意点

  • noneを指定するとEXIF情報が無視されるため、回転が必要な画像が横向きに表示される場合があります。

アクセシビリティ

  • 画像の向きが正しくないとコンテンツの理解が困難になるため、適切なimage-orientationが設定されていることを確認してください。

参考リンク