image-orientation

  • Raccourci de la révision : CSS/image-orientation
  • Titre de la révision : image-orientation
  • ID de la révision : 462925
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS image-orientation décrit comment corriger l'orientation par défaut d'une image.

Note :
  • Cette propriété n'est pas prévue pour réaliser des rotations arbitraires d'une image, mais pour corriger une orientation erronée. C'est pour cela qu'elle est arrondie au quart de tour le plus proche.
  • De manière similaire, cette propriété n'est pas prévue pour gérer l'affichage portrait de la mise en page. Puisque image-orientation affecte seulement les images, cela ne fonctionnera pas : ces modifications doivent être faites au niveau de la mise en page.
  • Dans la future spécification CSS Image Values and Replaced Content Module Level 4, il est prévu d'ajouter une nouvelle valeur, probablement from-image, pour ordonner à CSS de prendre en compte les données EXIF (ce qui n'est pas possible actuellement).

{{cssbox("image-orientation")}}

Syntaxe

Syntaxe formelle : {{csssyntax("image-orientation")}}
image-orientation: 0deg
image-orientation: 6.4deg   /* Arrondi à 0deg */
image-orientation: -90deg   /* Équivalent à 270deg, sa valeur calculée normalisée */

Valeurs

<angle>
La rotation d'angle de valeur {{ xref_cssangle() }} à appliquer à l'image. Elle est arrondie au plus proche multiple de 90deg (0.25tour)

Exemples

 

Spécifications

Spécification Statut Commentaire
{{ SpecName('CSS3 Images', '#image-orientation', 'image-orientation') }} {{ Spec2('CSS3 Images') }} Spécification initiale

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>image-orientation</code> décrit comment corriger l'orientation par défaut d'une image.</p>
<div class="note style-wrap">
  <strong>Note :</strong>
  <ul>
    <li>Cette propriété n'est pas prévue pour réaliser des rotations arbitraires d'une image, mais pour corriger une orientation erronée. C'est pour cela qu'elle est arrondie au quart de tour le plus proche.</li>
    <li>De manière similaire, cette propriété n'est pas prévue pour gérer l'affichage portrait de la mise en page. Puisque <code>image-orientation</code> affecte seulement les images, cela ne fonctionnera pas : ces modifications doivent être faites au niveau de la mise en page.</li>
    <li>Dans la future spécification CSS Image Values and Replaced Content Module Level 4, il est prévu d'ajouter une nouvelle valeur, probablement <code>from-image</code>, pour ordonner à CSS de prendre en compte les données EXIF (ce qui n'est pas possible actuellement).</li>
  </ul>
</div>
<p>{{cssbox("image-orientation")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Syntaxe formelle : {{csssyntax("image-orientation")}}
</pre>
<pre>
image-orientation: 0deg
image-orientation: 6.4deg   /* Arrondi à 0deg */
image-orientation: -90deg   /* Équivalent à 270deg, sa valeur calculée normalisée */

</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    &lt;angle&gt;</dt>
  <dd>
    La rotation d'angle de valeur {{ xref_cssangle() }} à appliquer à l'image. Elle est arrondie au plus proche multiple de <code>90deg</code> (<code>0.25tour</code>)</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>&nbsp;</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Images', '#image-orientation', 'image-orientation') }}</td>
      <td>{{ Spec2('CSS3 Images') }}</td>
      <td>Spécification initiale</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
Revenir à cette révision