CSSimage-orientation プロパティは、画像の向きのレイアウトに依存しない修正を指定します。向きの調整以外に使用してはいけません。そのような場合は、 transform プロパティで rotate <transform-function> の値を使用してください。

警告: このプロパティは近い将来、 from-image を除いて非推奨になる予定であり、機能は <img><picture> 要素のプロパティに移行する予定です。 flip および <angle> の値は Firefox 63 で廃止されました。

/* キーワード値 */
image-orientation: none;
image-orientation: from-image; /* 画像の EXIF データを使用 */

/* グローバル値 */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;

/* 廃止された値 Gecko 63 で廃止 */
image-orientation: 90deg; /* 90度回転 */
image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */

初期値0deg
適用対象すべての要素
継承あり
メディア視覚
計算値an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

none
既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
from-image
画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。
<angle> Gecko 63 で廃止
画像を回転させる <angle>。 もっとも近い 90deg (0.25turn) 単位の値に丸められます。
flip Gecko 63 で廃止
<angle> 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 <angle> を指定しない場合は、 0deg を使用します。

形式文法

from-image | <angle> | [ <angle>? flip ]

使用上のメモ

このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 transform プロパティに rotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

変形関数などの他の CSS プロパティとの組み合わせで使用された場合、 image-orientation による回転は、常に他の変形が行われる前に適用されます。

CSS

#image {
  image-orientation: from-image; /* ライブ例の中で変更することができます */
}

結果

仕様書

仕様書 状態 備考
CSS Images Module Level 4
image-orientation の定義
草案 from-image および flip キーワードを追加。
CSS Images Module Level 3
image-orientation の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 26IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 26Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
flip & <angle>
非推奨非標準
Chrome 未対応 なしEdge ? Firefox 未対応 26 — 63IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 未対応 26 — 63Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,