CSS3

プロパティ

image-orientation

[Edge]⛌。→●、mdn

画像の向きのレイアウトに依存しない修正を指定する。

カメラを横倒しにして撮った写真や、逆向きにスキャンした文書など、結果の画像が横転／上下逆さになることは、よくある。image-orientation プロパティは、画像を正しく方位させるために、画像ソースデータに“帯域外の”回転を適用する仕方を供する。

このプロパティの実装は、任意選択である。

このプロパティは、要素の画像が文書内に利用される前に適用される、90 度単位の回転を指定する。これは、内容画像（例： 置換要素や生成内容）／SVG 要素から参照される画像ソース（<feImage> など）／CSS 規則を介して適用された装飾的な画像（ background-image や他の <image> を値にとるプロパティによるものなど）に適用される。これは、ユーザー エージェントのナビ ツール バーやメニュー、等、文書の外側にある画像（例： favicon）には適用されない。

注記： このプロパティは、画像に対する任意の［回転／［縦／横］方向における裏返し］など、レイアウト変形を指定する用途は、意図されてはいない（その種の用途に設計された特能については [CSS-TRANSFORMS-1] を見よ）。また、回転はレイアウトの一部として行われるので、横置き、縦置き どちらの方位で印刷するかに応じて、画像を正しく方位させる必要はない（[CSS3PAGE] を見よ）これは、方位が不正な画像を正すために限って利用されるべきである。

none

追加の回転は適用されない ― 画像は符号化されたままに方位される。

from-image

EXIF などの画像のメタデータにて、方位が指定されている場合、この値は、そのメタデータが指定する、画像を正しく方位させるような角度に算出される。この角度は、必要なら 次項の <angle> 値のように丸められ、正規化される。メタデータに方位が指定されていない場合、none に算出される。

注記： どのメタデータを利用できるかに対しては、ある制約が課される ― § 画像メタデータを見よ。

<IMG src="../Sample/Picture.jpg" style="
 image-orientation:from-image;
">

<angle> || flip

<angle> に対する［正な値／負な値］は、画像を［時計回り／反時計回り］に回転させる。<angle> が省略された場合の既定は 0deg になる。

flip が指定された場合、画像は回転後に横方向に裏返される。

この値が適用されるのは、内容画像に限られ、装飾的な画像に対しては from-image としてふるまうことになる。この値は、非推奨にされた ― [CSS-PRINT] に適合するためを除き、その実装は、任意選択である。

プロパティの算出値は、次により計算される：

まず、<angle> を最も近い 90 度の倍数に丸めてから（ 2 つの値に等しく近い場合は、正な無限大に近い方へ）、360 度を法とする剰余を ― 結果が 0 度以上 360 度未満になるように ― とる。

<IMG src="../Sample/Picture.jpg" style="
 image-orientation:30deg;
">

<IMG src="../Sample/Picture.jpg" style="
 image-orientation:30deg flip;
">

flip

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

<IMG src="../Sample/Picture.jpg" style="
 image-orientation:flip;
">

［none、from-image］以外の値は、実装するのは任意選択であり、CSS においては非推奨にされた。

すべての［CSS レイアウト／描画］処理は、回転した後の画像を利用する ― 当の画像は、元から回転済みに符号化されていたかのように。例えば：

• 生来なサイズは、元の寸法ではなく、回転後の寸法から導出される。
• ［width／height］プロパティは、画像を回転した後の［縦／横］の寸法に適用される。
• 画像カーソルの hotspot 座標は、回転後の画像に相対的になる。
• ボーダー画像（border-image）は、回転後に切り分けられる。
• [CSS-TRANSFORMS-1] によるものなど、他の変形は、image-orientation が適用された後の画像に適用される。

img.ninety{ image-orientation: 90deg }
...
<img class="ninety" src=...>

注記： このプロパティは、以前は none を初期値に利用していた。初期値として from-image を利用することは、一般に［より良い利用者体験を生産し、非互換性は極力抑える］ものと予見されている ― 将来のデータ互換については、ユーザー エージェントが、この変更を為そうと試みることで追認することになろうが【？】。追認された場合、他の値【<angle>／flip】に対し“不正な方位を正す”以外の利用事例が提起されない限り、このプロパティは CSS から除去されると見込まれる。

テスト