CSS image-orientation Property

Description

The image-orientation CSS property is used to control the orientation of an image in a web page. It allows developers to specify whether an image should be displayed in its original orientation, rotated 90 degrees clockwise, rotated 180 degrees, or rotated 90 degrees counterclockwise. This property is particularly useful when working with images that have non-standard orientations, such as photos taken with smartphones, to ensure that they are displayed correctly on a webpage without the need to physically edit the image file.

Initial value
from-image
Applies to
All elements
Inherited
Yes
Computed value
Specified value, rounded and normalized
Animatable
discrete
JavaScript syntax
object.style.imageOrientation

Interactive Demo

Syntax

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

Values

  • from-imageThe 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).
  • flipThe image is flipped horizontally, that is reflected, after the rotation given by the <angle> value. If no <angle> is given, 0deg is used.

Example

.class {
   image-orientation: 90deg; 
}

Browser Support

The following table will show you the current browser support for the CSS image-orientation property.

Desktop
Edge Chrome Firefox Opera Safari
8181266713.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
81265813.41381

Last updated by CSSPortal on: 2nd January 2024