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

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 */
}

img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}

<img
  id="image"
  src="oriole.jpg"
  alt="Orientation obtenue à partir de l'image" />

<div>
  <input
    type="radio"
    id="from-image"
    name="orientation"
    value="from-image"
    checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>

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

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

Les autres propriétés CSS associées aux images :
transform
rotate