image-orientation

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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

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 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

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 */
}

HTML content

<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="Orientation taken from the image"/>
<select id="imageOrientation">
  <option value="from-image">from-image</option>
  <option value="90deg">90deg</option>
  <option value="flip" selected>flip</option>
</select>

JavaScript content

var imageOrientation = document.getElementById("imageOrientation");
imageOrientation.addEventListener("change", function (evt) {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});

Result

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	No support	26 (26)	No support	No support	No support
`from-image`	No support	26 (26)	No support	No support	No support
`flip`	No support	26 (26)	No support	No support	No support

Feature	Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	26.0 (26)	1.2 (26)	No support	No support	No support
`from-image`	No support	26.0 (26)	1.2 (26)	No support	No support	No support
`flip`	No support	26.0 (26)	1.2 (26)	No support	No support	No support

Syntax

Values

Formal syntax

Example

CSS content

HTML content

JavaScript content

Result

Specifications

Browser compatibility

See also

Document Tags and Contributors