image-orientation

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

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

Es wird keine zusätzliche Bildrotation angewendet; das Bild wird in der kodierten Ausrichtung oder gemäß anderer CSS-Eigenschaften angezeigt.

from-image

Standardanfangswert. Die im Bild enthaltenen EXIF-Informationen werden verwendet, um das Bild entsprechend zu drehen.

Beschreibung

Diese Eigenschaft ist ausschließlich dazu gedacht, die Ausrichtung von Bildern zu korrigieren, die mit einer gedrehten Kamera aufgenommen wurden. Sie sollte nicht für willkürliche Rotationen verwendet werden. Für jeden anderen Zweck als die Korrektur der Ausrichtung eines Bildes aufgrund der Art und Weise, wie es aufgenommen oder gescannt wurde, verwenden Sie eine transform-Eigenschaft mit dem rotate-Schlüsselwort, um die Rotation festzulegen. Dies schließt benutzergesteuerte Änderungen der Ausrichtung des Bildes oder Änderungen, die für den Druck im Hoch- oder Querformat erforderlich sind, ein.

Wenn diese Eigenschaft in Verbindung mit anderen CSS-Eigenschaften verwendet wird, wie z.B. einer <transform-function>, wird die Rotation durch image-orientation vor allen anderen Transformationen angewendet.

Formale Definition

Formale Syntax

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

Beispiele

Ausrichtung des Bildes basierend auf 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. Indem Sie image-orientation auf none ändern, können Sie die Wirkung der Eigenschaft sehen.

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

Browser-Kompatibilität

Siehe auch

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