image-orientation

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Mit der CSS Eigenschaft image-orientation kann die Ausrichtung eines Bildes geändert werden.

Hinweis:

Diese Eigenschaft ist nicht dazu gedacht Bilder beliebig zu drehen sondern eine fehlerhaften Ausrichtung zu korrigieren. Deshalb wird zur nächsten Vierteldrehung gerundet.
Ebenso ist diese Eigenschaft nicht dazu vorgesehen das Layout zu verändern, da sich image-orientation nur auf Bilder auswirkt.

Initialwert	`0deg`
Anwendbar auf	alle Elemente
Vererbt	Ja
Medien	visuell
Berechneter Wert	ein `<angle>`, auf den nächsten Viertel von `0deg` gerundet (üblicherweise `1turn)`
Animationstyp	diskret
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

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;

Werte

from-image: Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.
<angle>: Die <angle> der anzuwendenden Rotation. Wird zu den nächsten 90deg (0.25turn) gerundet.
flip: Das Bild wird horizontal gespiegelt, nachdem die Drehung des <angle> Wertes angewendet wird. Wenn keine <angle> gegeben ist, wird 0deg benutzt.

Formale Syntax

from-image | <angle> | [ <angle>? flip ]

Beispiele

<img src="arrow.png" alt="Pfeil" style="image-orientation: 180deg;">

Spezifikationen

Spezifikation	Status	Kommentar
CSS Images Module Level 4 Die Definition von 'image-orientation' in dieser Spezifikation.	Arbeitsentwurf	Die Schlüsselwörter `from-image` und `flip` wurden hinzugefügt.
CSS Images Module Level 3 Die Definition von 'image-orientation' in dieser Spezifikation.	Anwärter Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Grundlegende Unterstützung Experimentell	Chrome Keine Unterstützung Nein	Edge ?	Firefox Vollständige Unterstützung 26	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android ?	Edge Mobile ?	Firefox Android Vollständige Unterstützung 26	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`flip` & `<angle>` VeraltetNicht standardisiert	Chrome Keine Unterstützung Nein	Edge ?	Firefox Keine Unterstützung 26 — 63	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android ?	Edge Mobile ?	Firefox Android Keine Unterstützung 26 — 63	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.: Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.: Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.: Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.

Siehe auch

Andere bildbezogene CSS-Eigenschaften object-fit, object-position, image-orientation, image-rendering, image-resolution.