The image-orientation property specifies the ways that we can use to correct the default orientation (or rotation) of an image. It is used to fix the intended orientation of an image which is done by using 90 degree increments.

Syntax:

selector { 

    image-orientation: from-image | angle | angle flip | initial | inherit;

}

Values:

The image-orientation property accepts following values:

  • from-image; Uses EXIF data from the image itself (image's built-in orientation).
  • angle; A number representing an angle of rotation in increments of 90 degrees.
  • flip; Flips the image horizontally. If accompanied by an angle, than it will rotate to the set angle and than flip it horizontally.
  • initialinherit
NOTE: If the angle number is given outside a 90 degree increment, than it will be rounded to the nearest one; for instance 30 degree (or even 35.5) will be rounded to 0.

The angle and flip values may be combined, i.e. '90deg flip' will rotate the image for 90 degrees first, and then flip it horizontally.

Example

The example with image-orientation property and angle / flip values:

 

›› go to examples ››