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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: image-orientation
slug: Web/CSS/image-orientation
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/image-orientation
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p>
<div class="warning">
<p><strong>Attention !</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p>
</div>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>from-image</code></dt>
<dd>Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.</dd>
<dt><code><angle></code></dt>
<dd>Une valeur de type {{cssxref("<angle>")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.</dd>
<dt><code>flip</code></dt>
<dd>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 <code>0deg</code> sera utilisée.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
<p>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.</p>
<p>De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. <code>image-orientation</code> ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#image {
/* Peut-être modifiée dans l'exemple */
image-orientation: flip;
}
</pre>
<div class="hidden">
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation");
imageOrientation.addEventListener("change", function (evt) {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
</pre>
</div>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples", "100%", 240)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td>Ajout des mots-clés <code>from-image</code> et <code>flip</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.image-orientation")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("object-fit")}}</li>
<li>{{cssxref("object-position")}}</li>
<li>{{cssxref("image-orientation")}}</li>
<li>{{cssxref("image-rendering")}}</li>
<li>{{cssxref("image-resolution")}}</li>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("rotate")}}</li>
</ul>
|
