Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété image-orientation décrit la façon d'obtenir l'orientation correcte d'une image.
/* Valeurs d'angle */
/* Type <angle> */
image-orientation: 0deg;
image-orientation: 6.4deg; /* Arrondie à 0deg */
image-orientation: -90deg; /* Équivalent à 270deg, la
valeur calculée normalisée */
/* Valeurs avec un mot-clé */
image-orientation: from-image; /* Utilise les données EXIF
de l'image */
image-orientation: flip; /* Pas de rotation mais un
retournement horizontal */
/* Valeurs avec deux arguments */
image-orientation: 90deg flip; /* Rotation de 90deg, puis
retournement horizontal */
/* Valeurs globales */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;
Note :
- Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.
- De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait.
image-orientationne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.
| Valeur initiale | 0deg |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Média | visuel |
| 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 |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
from-image- Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.
<angle>- Une valeur de type
<angle>qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche. flip- L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur
0degsera utilisée.
Syntaxe formelle
from-image | <angle> | [ <angle>? flip ]
Exemples
CSS
#image {
/* Peut-être modifiée dans l'exemple */
image-orientation: flip;
}
HTML
<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
alt="Orientation déterminée à partir de l'image"/>
<select id="imageOrientation">
<option value="from-image">from-image</option>
<option value="90deg">90deg</option>
<option value="flip" selected>flip</option>
</select>
JavaScript
var imageOrientation = document.getElementById("imageOrientation");
imageOrientation.addEventListener("change", function (evt) {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 4 La définition de 'image-orientation' dans cette spécification. |
Version de travail | Ajout des mots-clés from-image et flip. |
| CSS Image Values and Replaced Content Module Level 3 La définition de 'image-orientation' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | Pas de support | 26 (26) | Pas de support | Pas de support | Pas de support |
from-image |
Pas de support | 26 (26) | Pas de support | Pas de support | Pas de support |
flip |
Pas de support | 26 (26) | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | Pas de support | 26.0 (26) | Pas de support | Pas de support | Pas de support |
from-image |
Pas de support | 26.0 (26) | Pas de support | Pas de support | Pas de support |
flip |
Pas de support | 26.0 (26) | Pas de support | Pas de support | Pas de support |