image-orientation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2020.
Die image-orientation
CSS Eigenschaft gibt eine layout-unabhängige Korrektur für die Orientierung eines Bildes an.
Probieren Sie es aus
Syntax
/* keyword values */
image-orientation: none;
image-orientation: from-image; /* Use EXIF data from the image */
/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
Werte
none
-
Wendet keine zusätzliche Bildrotation an; das Bild wird wie kodiert oder durch andere CSS-Eigenschaftswerte bestimmt ausgerichtet.
from-image
-
Standard-Ausgangswert. Die im Bild enthaltenen EXIF-Informationen werden verwendet, um das Bild angemessen zu drehen.
Warning:
image-orientation: none;
überschreibt nicht die von der EXIF-Information kodierte Orientierung von Bildern nicht-sicherer Herkunft, aufgrund von Sicherheitsbedenken. Erfahren Sie mehr vom CSS-Arbeitsgruppen-Entwurfsprotokoll.
Beschreibung
Diese Eigenschaft soll nur dazu verwendet werden, um die Orientierung von Bildern zu korrigieren, die mit gedrehter Kamera aufgenommen wurden. Sie sollte nicht für willkürliche Drehungen verwendet werden. Für Zwecke jenseits der Korrektur der Bildorientierung aufgrund der Aufnahme oder des Scannens verwenden Sie eine transform
-Eigenschaft mit dem rotate
-Schlüsselwort, um die Drehung anzugeben. Dies schließt benutzergesteuerte Änderungen der Bildorientierung oder Änderungen ein, die für den Druck im Hoch- oder Querformat erforderlich sind.
Wenn sie in Verbindung mit anderen CSS-Eigenschaften wie einer <transform-function>
verwendet wird, wird die image-orientation
-Drehung vor allen anderen Transformationen angewendet.
Formale Definition
Initialer Wert | from-image |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | ein angle , auf den nächsten Viertel von 0deg gerundet (üblicherweise 1turn) |
Animationstyp | diskret |
Formale Syntax
Beispiele
Orientierung des Bildes anhand der Bilddaten
Das folgende Bild wurde um 180 Grad gedreht, und die image-orientation
-Eigenschaft wird verwendet, um seine Ausrichtung basierend auf den EXIF-Daten im Bild zu korrigieren. Durch Änderung des image-orientation
-Werts auf none
können Sie die Wirkung der Eigenschaft sehen.
CSS
#image {
image-orientation: from-image; /* Can be changed in the live sample */
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Images Module Level 3 # the-image-orientation |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Weitere bildbezogene CSS-Eigenschaften:
object-fit
,object-position
,image-rendering
,image-resolution
. transform
undrotate