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

試してみましょう

構文

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-orientationnone に変更すると、このプロパティの効果を見ることができます。

CSS

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

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image-orientation
from-image
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報