image-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2020.

La propriété CSS image-orientation décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document.

css
/* Valeurs avec un mot-clé */
image-orientation: none;
image-orientation: from-image; /* Les données EXIF de l'image sont utilisées. */

/* Valeurs globales */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: unset;

Syntaxe

Valeurs

none

Aucune rotation supplémentaire n'est appliquée. L'image est orientée telle quelle ou comme indiquée par les autres propriétés CSS.

from-image

La valeur initiale par défaut. Ce sont les informations EXIF contenues dans l'image qui sont utilisées afin de tourner l'image correctement.

Description

Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger une orientation erronée.

Pour tout autre usage, on utilisera la propriété transform avec le mot-clé rotate afin d'indiquer une rotation. Ces autres usages incluent les modifications volontaires de l'orientation de l'image ou les changements nécessaires à l'impression portrait/paysage.

Lorsqu'elle est utilisée avec d'autres propriétés CSS (comme transform-function), la rotation fournie par image-orientation est appliquée avant toute autre transformation.

Définition formelle

Valeur initialefrom-image
Applicabilitétous les éléments
Héritéeoui
Valeur calculéeun angle, arrondi au quart de tour supérieur (à partir de 0deg) puis normalisé (modulo) pour obtenir l'angle relatif à un tour
Type d'animationdiscrète

Syntaxe formelle

image-orientation = 
from-image |
none |
[ <angle> || flip ]

Exemples

Orienter une image à partir des données qu'elle contient

L'image suivante a suivi une rotation de 180° et la propriété image-orientation est utilisée pour corriger son orientation à partir des données EXIF de l'image. En passant la valeur de la propriété image-orientation à none, vous pourrez voir l'effet de la propriété.

CSS

css
#image {
  image-orientation: from-image; /* Peut être édité dans l'exemple */
}

Résultat

Spécifications

Specification
CSS Images Module Level 3
# the-image-orientation

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi