Image-orientation - Property CSS

image-orientation

Summary of characteristics of the image-orientation property

Quick description
Sets the orientation of an image (should it be rotate of 90°?).
Status
Standard
Usable for
HTML
Predefined values
from-image | none
Percentages
Not applicable.
Initial value
from-image (1)
Inherited by default
Yes.
Animation type
Discrète : during an animation, the image-orientation property passes from one value to another without transition.
W3C Module
CSS Images Module
References (W3C)
Document status: CR (Candidate Recommendation)

(1) The initial value was first none, but this has been changed. Indeed, the from-image value is the most appropriate in most cases.

Syntax diagram of image-orientation.

Image-orientation property - Syntax diagramSyntax diagram of the image-orientation CSS property. See stylescss.free.fr for details. from-image from-image none none angle angle flip flipimage-orientation:;image-orientation:;
Syntax diagram of the image-orientation property
The links in the diagram provide access to more details
Download the diagram in SVG

Description of the terms used on the diagram:

  • angle is a numeric value, multiple of 90 and followed by one of the CSS angle units.

Description of the image-orientation property.

The image-orientation property specifies a rotation to apply to an image. The angle of rotation should be a multiple of 90 degrees. image-orientation only applies to images added by CSS (background images, content added or replaced) and images added conventionally with an img tag, as well as images whose source is an SVG code.

Images (photos in particular) have information in their EXIF that indicates how the photo should be rotated: 90°, 180° or 270°. If images don't have this information included in their EXIF, in which case the image-orientation property will be inoperative.

All other properties apply after image-orientation. For example, the height and width of the image are those after the image is turned over.

image-orientation is only used to correct the orientation of an image that has been photographed with a different orientation than the display one. To rotate any image, and at any angle, refer to the transformations (transform and rotate properties).

Values for image-orientation.

  • image-orientation: from-image;

    An image rotation can optionally be applied based on the metadata contained in the image file (EXIF data in particular).

  • image-orientation: none;

    No rotation is applied: the image is displayed as it is. This can lead to incorrect display when the snapping orientation is different from the display orientation.

  • image-orientation: 90deg; ✗ image-orientation: 90deg flip; ✗

    It was initially planned to be able to define the rotation by indicating a multiple angle of 90 degrees (rotation in quarter turns). But this possibility has been abandoned.

    The word flip caused the image to be flipped by horizontal symmetry.

Global values
(common to all properties):

image-orientation: initial (from-image (1)) image-orientation: inherit image-orientation: revert image-orientation: revertLayer image-orientation: unset

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Simulator.

These images include orientation information in their metadata (EXIF). For the first image, this information indicates that the image should be rotated 90°, for the second that it must be rotated 180°. The from-image value correctly interprets this information.

image-orientation :
Example for image-orientation - Rotation of 90°
Example for image-orientation - Rotation of 180°

Browsers compatibility.

The image-orientation property is well recognized in its basic syntax, but with some differences in behavior from one browser to another. Careful! Options such as image mirroring with flip, or specifying a rotation angle are deprecated.

Column 1
Support for the image-orientation property that can be used to correct the orientation of an image.
Column 2
Support for the from-image value in the image-orientation syntax.
1
image-orientation
property
2
from-image
value
Estimated overall support.
96%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

image-orientation property historic.

  • CSS Images Module Level 3

    First presentation of this image-orientation property.
    WD
    July 23, 2009
    Working Draft.
    CR
    April 17, 2012
    Candidate Recommendation.
    PR
    REC

See also, about the images.

The CSS specifications published by the W3C are organized into modules. The image-orientation property is part of the CSS Images Module.
The following definitions are also described in this same module.

Properties:

image-rendering
Langue française
Sets the Image Scaling Mode.
object-fit
Langue française
Defines how multimedia content (image, video) should adapt to the dimensions of its container.
object-position
Langue française
Defines the position of an image or video relative to its container.

Functions:

conic-gradient()
Langue française
Sets a conical color gradient.
⚠
cross-fade()
Langue française
Mixes multiple images.
element()
Langue française
Récupère l'aspect d'un élément sous forme d'une image.
⚠
image()
Langue française
Refers to an image, specifying, if necessary, its reading direction.
image-set()
Langue française
Offers the browser a choice of images so that it can choose the most suitable one (resolution, format, etc.).
linear-gradient()
Determines a color gradient that moves linearly throughout the element.
radial-gradient()
Langue française
Determines a radial color gradient (from the center to the edges).
repeating-conic-gradient()
Langue française
Sets a conical color gradient, and repeats it across the entire surface of the element.
repeating-linear-gradient()
Langue française
Determines a linear color gradient and repeats it over the entire surface of the element.
repeating-radial-gradient()
Langue française
Determines a radial color gradient and repeats it over the entire surface of the element.
⚠
stripes()
Langue française
Sets a color band image.