image-orientation

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSS の image-orientation プロパティは、デフォルトの画像の向きをどのように補正するかを指定します。

注記:

これは画像を意図的に回転させることは意図しておらず、誤った向きを補正するためのプロパティです。これが、値が 90 度単位に丸められる理由です。
同様に、これはレイアウトを縦向きに変更することを意図していません。image-orientation は画像にしか影響がありません。画像以外ではレイアウトレベルで変更しなければならないため動作しません。

初期値	`0deg`
適用対象	全要素
継承	継承する
メディア	visual
計算値	an `angle`, rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn`
アニメーションの可否	不可
正規順序	形式文法で定義される一意のあいまいでない順序

構文

image-orientation: 0deg;
image-orientation: 6.4deg;     /* 0deg に丸められる */
image-orientation: -90deg;     /* ノーマライズした計算値である 270deg と同じ */
image-orientation: from-image; /* 画像の EXIF データを使用 */
image-orientation: 90deg flip; /* 90deg 回転して、水平方向に反転 */
image-orientation: flip;       /* 回転せず、水平方向の反転のみ適用 */

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

値

from-image: 画像を適切に回転させるため、画像に含まれている EXIF 情報を使用します。
<angle>: 画像を回転させる <angle>。もっとも近い 90deg (0.25turn) 単位の値に丸められます。
flip: <angle> 値に従って回転した後に、画像を水平方向に反転します。<angle> を指定しない場合は、0deg を使用します。

形式文法

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

例

仕様

仕様書	策定状況	コメント
CSS Image Values and Replaced Content Module Level 4 image-orientation の定義	草案	`from-image` および `flip` キーワードを追加。
CSS Image Values and Replaced Content Module Level 3 image-orientation の定義	勧告候補	最初期の定義

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本サポート	未サポート	26 (26)	未サポート	未サポート	未サポート
`from-image`	未サポート	26 (26)	未サポート	未サポート	未サポート
`flip`	未サポート	26 (26)	未サポート	未サポート	未サポート

機能	Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本サポート	未サポート	26.0 (26)	1.2 (26)	未サポート	未サポート	未サポート
`from-image`	未サポート	26.0 (26)	1.2 (26)	未サポート	未サポート	未サポート
`flip`	未サポート	26.0 (26)	1.2 (26)	未サポート	未サポート	未サポート

image-orientation

概要

構文

値

形式文法

例

仕様

ブラウザ実装状況

関連情報

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