We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

警告: このプロパティは近い将来に非推奨になる予定で、機能は <img><picture> 要素と from-image の例外のプロパティに移行する予定です。

/* <angle> 値 */
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;

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

構文

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

形式文法

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

使用上のメモ

このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。これが、指定した回転角度が約90度に丸められる理由です。

撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 transform プロパティに rotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷を縦長や横長に変更する場合も含みます。

CSS

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

結果

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ?26 なし なし なし
from-image なし ?26 なし なし なし
flip なし ?26 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? ?26 なし なし なし
from-image なし ? ?26 なし なし なし
flip なし ? ?26 なし なし なし

関連情報

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

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