1 files changed, 98 insertions, 0 deletions
diff --git a/files/de/web/css/image-orientation/index.html b/files/de/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..5ef67d6ea1
--- /dev/null
+++ b/files/de/web/css/image-orientation/index.html
@@ -0,0 +1,98 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>