Widely available Supported across all major browsers. Safe to use in production.

image-orientation

The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.

Units and functions

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
image-orientation
81
81
26
13.1
81
13.4
from-image
81
81
26
13.1
81
13.4
none
81
81
26
13.1
81
13.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
img {
  image-orientation: from-image;
}
.no-rotate {
  image-orientation: none;
}

Live demo

From-image(exifcompliant)

CSS From-image(EXIFcompliant) demo.

PreviewFullscreen

None(rotate)

CSS None(rotate) demo.

PreviewFullscreen

Applyexample

CSS Applyexample demo.

PreviewFullscreen

Use cases

  • Using image-orientation

    The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links