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.

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.

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

Anfangswert	`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

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 */
}

img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}

<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
    type="radio"
    id="from-image"
    name="orientation"
    value="from-image"
    checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>

document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});

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 und rotate