---
title: image-orientation
slug: Web/CSS/image-orientation
tags:
  - CSS
  - CSS Bild
  - CSS Eigenschaft
  - Referenz
translation_of: Web/CSS/image-orientation
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Mit der <a href="/en-US/docs/CSS">CSS</a> Eigenschaft <code>image-orientation</code> kann die Ausrichtung eines Bildes geändert werden.</p>

<div class="note style-wrap">
<p><strong>Hinweis:</strong></p>

<ul>
 <li><span id="result_box" lang="de"><span class="hps">Diese Eigenschaft</span> <span class="hps">ist nicht dazu gedacht</span> Bilder beliebig zu drehen<span class="hps"> sondern eine</span><span class="hps"> fehlerhaften</span> <span class="hps">Ausrichtung</span> <span class="hps">zu korrigieren.</span> <span class="hps">Deshalb wird</span><span class="hps"> zur nächsten</span> <span class="hps">Vierteldrehung</span> <span class="hps">gerundet.</span></span></li>
 <li><span id="result_box" lang="de"><span class="hps">Ebenso</span> <span class="hps">ist diese Eigenschaft</span> <span class="alt-edited hps">nicht dazu vorgesehen</span><span class="alt-edited"> das Layout</span> <span class="hps">zu verändern,</span> d<span class="alt-edited hps">a sich</span> </span><code>image-orientation</code><span lang="de"> <span class="hps">nur auf</span> <span class="hps">Bilder auswirkt.</span></span></li>
</ul>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">image-orientation: 0deg;
image-orientation: 6.4deg;     /* Wird zu 0deg gerundet */
image-orientation: -90deg;     /* Wie 270deg, der normalisiert berechnete Wert */
image-orientation: from-image; /* EXIF Daten des Bildes verwenden */
image-orientation: 90deg flip; /* Um 90deg rotieren und horizontal spiegeln */
image-orientation: flip;       /* Horizontales Spiegeln ohne Drehung */

/* Globale Werte */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>from-image</code></dt>
 <dd><span id="result_box" lang="de"><span class="hps">Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.</span></span></dd>
 <dt><code>&lt;angle&gt;</code></dt>
 <dd>Die {{cssxref("&lt;angle&gt;")}} der anzuwendenden Rotation. Wird zu den nächsten <code>90deg</code> (<code>0.25turn</code>) gerundet.</dd>
 <dt><code>flip</code></dt>
 <dd>Das Bild wird horizontal gespiegelt, nachdem die Drehung des {{cssxref("&lt;angle&gt;")}} Wertes angewendet wird. Wenn keine {{cssxref("&lt;angle&gt;")}} gegeben ist, wird <code>0deg</code> benutzt.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: html">&lt;img src="arrow.png" <span class="highATT">alt=</span><span class="highVAL">"Pfeil" </span>style="image-orientation: 180deg;"&gt;</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>

<div>


<p>{{Compat("css.properties.image-orientation")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Andere bildbezogene CSS-Eigenschaften {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
</ul>