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 legt eine layout-unabhängige Korrektur der Ausrichtung eines Bildes fest.

Probieren Sie es aus

image-orientation: none;

image-orientation: from-image;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/hummingbird.jpg" />
</section>

#example-element {
  height: inherit;
}

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 Bilddrehung an; das Bild ist so ausgerichtet, wie es kodiert ist oder wie es durch andere CSS-Eigenschaften angegeben wird.
from-image: Standard-Startwert. Die im Bild enthaltenen EXIF-Informationen werden verwendet, um das Bild korrekt zu drehen.

Warning: image-orientation: none; überschreibt nicht die Ausrichtung von Bildern aus unsicheren Ursprüngen, wie sie durch ihre EXIF-Informationen kodiert sind, aus Sicherheitsgründen. Weitere Informationen finden Sie im Entwurf des CSS-Arbeitsteams.

Diese Eigenschaft sollte nur verwendet werden, um die Ausrichtung von Bildern zu korrigieren, die mit gedrehter Kamera aufgenommen wurden. Sie sollte nicht für beliebige Drehungen verwendet werden. Für alle anderen Zwecke als die Korrektur der Bildausrichtung aufgrund der Art und Weise, wie es aufgenommen oder gescannt wurde, verwenden Sie eine transform-Eigenschaft mit dem Schlüsselwort rotate, um die Drehung anzugeben. Dies schließt alle vom Benutzer geleiteten Änderungen der Bildausrichtung ein oder Änderungen, die für das Drucken im Hoch- oder Querformat erforderlich sind.

Wenn sie in Verbindung mit anderen CSS-Eigenschaften verwendet wird, wie z. B. einer <transform-function>, wird jede 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

Ausrichtung des Bildes aus Bilddaten

Das folgende Bild wurde um 180 Grad gedreht und die image-orientation-Eigenschaft wird verwendet, um seine Ausrichtung basierend auf den im Bild enthaltenen EXIF-Daten zu korrigieren. Indem Sie die image-orientation auf none ändern, 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

Siehe auch

Andere bildbezogene CSS-Eigenschaften: object-fit, object-position, image-rendering, image-resolution.
transform und rotate