Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

image-orientation

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

概要

CSSimage-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) 未サポート 未サポート 未サポート

関連情報

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

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