Image-orientation - Propriété CSS

(1) La valeur initiale a d'abord été none, mais cela a été modifié. En effet, la valeur from-image est celle qui convient le mieux dans la plupart des cas.

Schéma de la syntaxe de image-orientation.

Description des termes utilisés sur le schéma :

• angle est une valeur numérique multiple de 90 suivie d'une des unités d'angle.

Description de la propriété image-orientation.

La propriété image-orientation spécifie une rotation à appliquer à une image. L'angle de rotation doit être un multiple de 90 degrés. image-orientation ne concerne que les images ajoutées par CSS (images d'arrière-plan, contenu ajouté ou remplacé) et les images ajoutées classiquement avec une balise img, ainsi que les images dont la source est un code SVG.

Les images (les photos en particulier) disposent d'une information dans leur EXIF qui indique comment doit être tournée la photo : 90°, 180° ou 270°. Les images n'ont pas toutes ces informations incluses dans leur EXIF, dans ce cas la propriété image-orientation sera inopérante.

Toutes les autres propriétés s'appliquent après image-orientation. Par exemple, la hauteur et la largeur de l'image sont celles après le retournement éventuel de celle-ci.

image-orientation ne sert qu'à corriger l'orientation d'une image qui a été photographiée avec une orientation différente de celle d'affichage. Pour faire pivoter une image quelconque, et suivant n'importe quel angle, reportez vous aux transformations (propriétés transform et rotate).

Valeurs pour image-orientation.

• image-orientation: from-image;

  Une rotation de l'image peut éventuellement être appliquée en fonction des métadonnées contenues dans le fichier image (données EXIF en particulier).

• image-orientation: none;

  Aucune rotation n'est appliquée : l'image est affichée telle qu'elle est. Ceci peut conduire à un affichage incorrect lorsque l'orientation de capture est différente de l'orientation d'affichage.

• image-orientation: 90deg; ✗ image-orientation: 90deg flip; ✗

  Il était initialement prévu de pouvoir définir la rotation en indiquant un angle multiple de 90 degrés (rotation par quarts de tour). Mais cette possibilité a été abandonnée.

  Le mot flip provoquait un retournement de l'image.

• image-orientation: initial; (from-image ⁽¹⁾) image-orientation: inherit; image-orientation: revert; image-orientation: revertLayer; image-orientation: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété image-orientation.

Ces images comportent dans leurs méta-données (EXIF) l'information d'orientation. Pour la première image, ces informations indique que l'image doit être tournée de 90°, pour la seconde qu'elle doit être tournée de 180°. La valeur from-image interprète correctement ces informations.

Compatibilité des navigateurs avec image-orientation.

La propriété image-orientation est bien reconnue dans sa syntaxe de base, avec cependant quelques différences de comportement d'un navigateur à l'autre. Attention ! Les options telles que la symétrie de l'image ou l'indication d'un angle de rotation sont obsolètes.

1

Propriété
image-orientation

2

Valeur
from-image

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété image-orientation.

• Module CSS - Image niveau 3

  Concernant image-orientation. Première présentation de cette propriété image-orientation.
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

Voir aussi, à propos des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété image-orientation fait partie du module Module CSS - Images.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :