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;


  • This property is intended to correct erroneous image orientations, not to perform arbitrary rotations. That is why it's 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 value 0deg
Applies to all elements
Inherited yes
Media visual
Computed value an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar



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

Formal syntax

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



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



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

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support No ? 26 No No No
from-image No ? 26 No No No
flip No ? 26 No No No
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support No ? ? 26 No No ?
from-image No ? ? 26 No No ?
flip No ? ? 26 No No ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.