La propriété image-orientation décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété transform avec la fonction rotate.

Attention ! Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément <img> et/ou de l'élément <picture> (excepté peut-être from-image).

/* Valeurs d'angle */
/* Type <angle>    */
image-orientation: 0deg;
image-orientation: 6.4deg;     /* Arrondie à 0deg */
image-orientation: -90deg;     /* Équivalent à 270deg, la 
                                  valeur calculée normalisée */

/* Valeurs avec un mot-clé */
image-orientation: from-image; /* Utilise les données EXIF 
                                  de l'image */
image-orientation: flip;       /* Pas de rotation mais un
                                  retournement horizontal */

/* Valeurs avec deux arguments */
image-orientation: 90deg flip; /* Rotation de 90deg, puis
                                  retournement horizontal */

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

Valeur initiale0deg
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
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
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

from-image
Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.
<angle>
Une valeur de type <angle> qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.
flip
L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur 0deg sera utilisée.

Syntaxe formelle

from-image | <angle> | [ <angle>? flip ]

Notes d'utilisation

Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.

De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. image-orientation ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.

Exemples

CSS

#image {
  /* Peut-être modifiée dans l'exemple */
  image-orientation: flip; 
}

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'image-orientation' dans cette spécification.
Version de travail Ajout des mots-clés from-image et flip.
CSS Images Module Level 3
La définition de 'image-orientation' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge ? Firefox Support complet 26IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Support complet 26Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
flip & <angle>
ObsolèteNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support 26 — 63IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Aucun support 26 — 63Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, prayash, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,