CSS - image-orientation

The image-orientation CSS property describes how to correct the default orientation of an image.

Syntax  

CSS
image-orientation: 0deg;
image-orientation: 6.4deg;     /* Rounded to 0deg */
image-orientation: -90deg;     /* Equivalent to 270deg, its normalized computed value */
image-orientation: from-image; /* Use EXIF data from the image */
image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
image-orientation: flip;       /* No rotation, only applies a horizontal flip */

/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;

Values

from-image
The EXIF information contained in the image will be used to rotate the image appropriately.
<angle>
The <angle> of rotation to apply to the image. It is rounded to the nearest 90deg (0.25turn).
flip
The image is flipped horizontally, that is reflected, after the rotation given by the <angle> value. If no <angle> is given, 0deg is used.

Formal syntax

CSS
from-image <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> flip<a href="css/value_definition_syntax#brackets" title="Brackets">]</a>

Description  

The image-orientation CSS property describes how to correct the default orientation of an image.

Note:

  • This property is not intended to perform arbitrary rotation on an image, but to correct erroneous orientation. That's why it is rounded to the nearest quarter of a turn.
  • Similarly this property is not intended to handle the layout -> portrait changing. As image-orientation affects only images, it won't work: the changes must happen at the layout-level.

Initial value0deg
Applies toall elements
Inheritedyes
Mediavisual
Computed valuean <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Not supported 26 (26) Not supported Not supported Not supported
from-image Not supported 26 (26) Not supported Not supported Not supported
flip Not supported 26 (26) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
from-image Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
flip Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported

See Also  

Specifications  

Specification Status Comment
CSS Image Values and Replaced Content Module Level 4
The definition of 'image-orientation' in that specification.		 Working Draft The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3
The definition of 'image-orientation' in that specification.		 Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/image-orientation

CSS CSS Image CSS Property Reference