image-orientation property CSS Reference

Definition and Usage

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

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

Formal syntax: from-image | <angle> | [<angle>? flip]

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 */
image-orientation: inherit

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.

Examples

No examples

Compatibility

Desktop browsers

Mobile browsers