image-orientation

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;

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

Example

CSS

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

Result

Specifications

Browser compatibility

See also

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