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.
/* 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 initiale | from-image |
---|---|
Applicabilité | tous les éléments |
Héritée | oui |
Valeur calculée | un angle , arrondi au quart de tour supérieur (à partir de 0deg ) puis normalisé (modulo) pour obtenir l'angle relatif à un tour |
Type d'animation | discrète |
Syntaxe formelle
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
#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