image-orientation

image-orientationCSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。

Note: from-imagenone 以外の値は、仕様書では非推奨とされています。

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

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

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

構文

none

既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。

from-image

画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。

<angle>

画像を回転させる <angle>。 もっとも近い 90deg (0.25turn) 単位の値に丸められます。

flip

<angle> 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。<angle> を指定しない場合は、 0deg が使用されます。

解説

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

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

公式定義

初期値from-image
適用対象すべての要素
継承あり
計算値0deg から次の 4 分の 1 回転に丸めて正規化した angle1turn で割った余り
アニメーションの種類離散値

形式文法

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

画像データから画像の向きを変更

CSS

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

結果

仕様書

Specification
CSS Images Module Level 3 (CSS Images 3)
# the-image-orientation

ブラウザーの互換性

BCD tables only load in the browser

関連情報