Image-orientation - Property CSS

(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.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• 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.

• image-orientation: initial; (from-image ⁽¹⁾) 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.

Browsers compatibility with image-orientation.

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.

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

Historic of the image-orientation property.

• CSS Images Module Level 3

  Regarding image-orientation. First presentation of this image-orientation property.
  

  July 23, 2009

  Working Draft.

  

  April 17, 2012

  Candidate Recommendation.

  

  

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-orientation

Sets the orientation of an image (should it be rotate of 90°?).

image-rendering

Sets the Image Scaling Mode.

object-fit

Defines how multimedia content (image, video) should adapt to the dimensions of its container.

object-position

Defines the position of an image or video relative to its container.

Functions:

conic-gradient()

Sets a conical color gradient.

⚠

cross-fade()

Mixes multiple images.

element()

Récupère l'aspect d'un élément sous forme d'une image.

⚠

image()

Refers to an image, specifying, if necessary, its reading direction.

image-set()

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()

Determines a radial color gradient (from the center to the edges).

repeating-conic-gradient()

Sets a conical color gradient, and repeats it across the entire surface of the element.

repeating-linear-gradient()

Determines a linear color gradient and repeats it over the entire surface of the element.

repeating-radial-gradient()

Determines a radial color gradient and repeats it over the entire surface of the element.