image-orientation

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

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
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

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;

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]

Examples

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

Browser compatibility

See also

• Other image-related CSS properties: object-fit, object-position, image-orientation, image-rendering, image-resolution.