image-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2020.

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

構文

css

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

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

値

none: 追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
from-image: 既定の初期値です。画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。

警告: image-orientation: none; はセキュリティ上の懸念により、EXIF 情報でエンコードされた安全でないオリジン画像の向きを上書きしません。詳細は、この CSS 作業グループ草案課題をご覧ください。

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

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

公式定義

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

形式文法

image-orientation = 
  from-image           |
  none                 |
  [ <angle> || flip ]

例

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

以下の画像は 180 度回転しており、 image-orientation プロパティを使用して、画像内の EXIF データに基づいて向きを修正しています。 image-orientation を none に変更すると、このプロパティの効果を見ることができます。

CSS

css

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

img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}

<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
    type="radio"
    id="from-image"
    name="orientation"
    value="from-image"
    checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>

document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser