image-orientation
=================

The **`image-orientation`** CSS property specifies a layout-independent correction to the orientation of an image.

Try it
------

Syntax
------


```css
/\* keyword values \*/
image-orientation: none;
image-orientation: from-image; /\* Use EXIF data from the image \*/

/\* Global values \*/
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
```

### Values

`none`

Does not apply any additional image rotation; the image is oriented as encoded or as other CSS property values dictate.

`from-image`

Default initial value. The EXIF information contained in the image is used to rotate the image appropriately.


**Warning:** `image-orientation: none;` **does not** override the orientation of non-secure-origin images as encoded by their EXIF information, due to security concerns. Find out more from the CSS working group draft issue.

Description
-----------

This property is intended *only* to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. It should *not* be used for arbitrary rotations. For any purpose other than correcting an image's orientation due to how it was shot or scanned, use a `transform` property with the `rotate` keyword to specify rotation. This includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation.

If used in conjunction with other CSS properties, such as a `<transform-function>`, any `image-orientation` rotation is applied before any other transformations.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `from-image` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | an `<angle>`, rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn` |
| Animation type | discrete |

Formal syntax
-------------
```

image-orientation =   
  from-image           |  
  none                 |  
  [ <angle> || flip ]    
  
```

Examples
--------

### Orienting image from image data

The following image has been rotated through 180 degrees, and the `image-orientation` property is used to correct its orientation based on the EXIF data in the image. By changing the `image-orientation` to `none` you can see the effect of the property.

#### CSS


```css
#image {
  image-orientation: from-image; /\* Can be changed in the live sample \*/
}
```


```
img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}
```


```
<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
 type="radio"
 id="from-image"
 name="orientation"
 value="from-image"
 checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>
```


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


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Other image-related CSS properties: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`.
* `transform` and `rotate`