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 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 nearest90deg
(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 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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 | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | ? | ? | 26 | No | No | No |
from-image | No | ? | ? | 26 | No | No | No |
flip | No | ? | ? | 26 | No | No | No |
See also
- Other image-related CSS properties:
object-fit
,object-position
,image-orientation
,image-rendering
,image-resolution
.