blob: 9b6da870a6aa59046f4b5f0c48cb70416e75bc91 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: image-orientation
slug: Web/CSS/image-orientation
translation_of: Web/CSS/image-orientation
browser-compat: css.properties.image-orientation
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document.
```css
/* 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 sont [les informations EXIF](https://fr.wikipedia.org/wiki/Exchangeable_image_file_format) 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`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/transform-function)), la rotation fournie par `image-orientation` est appliquée avant toute autre transformation.
## Définition formelle
{{cssinfo}}
## Syntaxe formelle
{{csssyntax}}
## 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
```css
#image {
image-orientation: from-image; /* Peut être édité dans l'exemple */
}
```
```css hidden
img {
margin: .5rem 0;
}
label {
font-family: monospace;
}
```
```html hidden
<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>
```
```js hidden
document.addEventListener('change', evt => {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
```
#### Résultat
{{EmbedLiveSample("", "100%", 900)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- Les autres propriétés CSS associées aux images :
- [`object-fit`](/fr/docs/Web/CSS/object-fit)
- [`object-position`](/fr/docs/Web/CSS/object-position)
- [`image-rendering`](/fr/docs/Web/CSS/Image-rendering)
- [`image-resolution`](/fr/docs/Web/CSS/image-resolution)
- [`transform`](/fr/docs/Web/CSS/transform)
- [`rotate`](/fr/docs/Web/CSS/rotate)
|
