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

image-orientation: none;

image-orientation: from-image;

View Code

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
81	81	26	67	13.1

Tablets / Mobile
81	26	58	13.4	13	81

Last updated by CSSPortal on: 2nd January 2024