La propriétéCSSimage-orientation décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document.

/* 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 sontles 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 (commetransform-function), la rotation fournie parimage-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   src="oriole.jpg"  alt="Orientation obtenue à partir de l'image" /><div>  <input    type="radio"       name="orientation"    value="from-image"    checked />  <label for="from-image">from-image</label></div><div>  <input type="radio" 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