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-orientationnur 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ächsten90deg(0.25turn) gerundet. flip- Das Bild wird horizontal gespiegelt, nachdem die Drehung des
<angle>Wertes angewendet wird. Wenn keine<angle>gegeben ist, wird0degbenutzt.
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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 | iOS Safari | Samsung Internet | |
| Grundlegende Unterstützung | 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> | 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.