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.
Initialwert0deg
Anwendbar aufalle Elemente
VererbtJa
Medienvisuell
Berechneter Wertein <angle>, auf den nächsten Viertel von 0deg gerundet (üblicherweise  1turn)
Animationstypdiskret
Kanonische Reihenfolgedie 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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
image-orientation
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 26IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 26Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
flip & <angle>
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 26 — 63IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung 26 — 63Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
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

Verwandte Themen