image-orientation

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;

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 ]

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

<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="Orientation déterminée à partir de l'image"/>
<select id="imageOrientation">
  <option value="from-image">from-image</option>
  <option value="90deg">90deg</option>
  <option value="flip" selected>flip</option>
</select>

var imageOrientation = document.getElementById("imageOrientation");
imageOrientation.addEventListener("change", function (evt) {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});

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.

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

Compatibilité des navigateurs

BCD tables only load in the browser