image-orientation

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.

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.

image-orientation = 
  from-image           |
  none                 |
  [ <angle> || flip ]  

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

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