CSS Click Chart

Image Orientation

Allows you to correctly orient an image that was taken with a camera turned on its side, or an image that positioned improperly on a scanner.

Specification

Orienting an Image on the Page on W3C

Example Code

.img-1 {
  image-orientation: 270deg;
}

.img-2 {
  image-orientation: flip;
}

/* Uses EXIF info from image to deterimine orienation */
.img-1 {
  image-orientation: from-image;
}

Live Demonstration

This image can be "oriented" differently to fix its wrong orientation.

Browser Support

Can I Use css-image-orientation? Data on support for the image-orientation feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

CSS Image Orientation Lands in Firefox 26