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 der Ausrichtung eines Bildes an.

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 wird so orientiert, wie es kodiert ist oder wie es andere CSS-Eigenschaften vorgeben.
from-image: Standard-Initialwert. Die im Bild enthaltenen EXIF Informationen werden verwendet, um das Bild entsprechend zu drehen.

Warnung:>image-orientation: none; überschreibt nicht die Ausrichtung von Bildern aus unsicheren Ursprüngen, wie sie durch ihre EXIF Informationen kodiert sind, aufgrund von Sicherheitsbedenken. Erfahren Sie mehr im Entwurf des CSS-Arbeitsgruppendokuments.

Beschreibung

Diese Eigenschaft ist nur dazu gedacht, die Ausrichtung von Bildern zu korrigieren, die mit gedrehter Kamera aufgenommen wurden. Sie sollte nicht für beliebige Drehungen verwendet werden. Für jeden anderen Zweck, außer der Korrektur der Bildausrichtung aufgrund der Aufnahme oder des Scannens, verwenden Sie eine transform Eigenschaft mit dem rotate Schlüsselwort, um die Drehung anzugeben. Dies schließt alle vom Nutzer veranlassten Änderungen an der Bildausrichtung ein, oder Änderungen, die für den Druck im Hoch- versus Querformat erforderlich sind.

Wenn diese Eigenschaft zusammen mit anderen CSS-Eigenschaften, wie zum Beispiel 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

Bildorientierung basierend auf Bilddaten

Das folgende Bild wurde um 180 Grad gedreht, und die image-orientation Eigenschaft wird verwendet, um seine Orientierung basierend auf den EXIF-Daten im Bild zu korrigieren. Durch Ändern der image-orientation zu none können Sie die Wirkung der Eigenschaft erkennen.

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