image-orientation
image-orientation は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 81 | 81 | 26 | 13.1 | 81 | 13.4 | |
from-image | 81 | 81 | 26 | 13.1 | 81 | 13.4 |
none | 81 | 81 | 26 | 13.1 | 81 | 13.4 |
基本構文
CSS
img {
image-orientation: from-image;
}
.no-rotate {
image-orientation: none;
}ライブデモ
実務での使いどころ
-
スマートフォン写真の自動回転補正
アップロードされたスマートフォン写真のEXIF情報に基づいて、正しい向きで表示されるようにします。
注意点
- noneを指定するとEXIF情報が無視されるため、回転が必要な画像が横向きに表示される場合があります。
アクセシビリティ
- 画像の向きが正しくないとコンテンツの理解が困難になるため、適切なimage-orientationが設定されていることを確認してください。