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

css
/* 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 Wertfrom-image
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertein angle, auf den nächsten Viertel von 0deg gerundet (üblicherweise  1turn)
Animationstypdiskret

Formale Syntax

image-orientation = 
from-image |
none |
[ <angle> || flip ]

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

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