image-orientation

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

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

#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

Compatibilité des navigateurs

Voir aussi

• Les autres propriétés CSS associées aux images :
  • object-fit
  • object-position
  • image-rendering
  • image-resolution
• transform
• rotate