This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

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

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
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

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

Example

CSS content

#image {
  image-orientation: flip; /* Can be changed in the live sample */
}

Result

Specifications

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ?26 No No No
from-image No ?26 No No No
flip No ?26 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support No ? ?26 No No No
from-image No ? ?26 No No No
flip No ? ?26 No No No

See also

Document Tags and Contributors

 Last updated by: fscholz,