image-orientation CSS property

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

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

none

Wendet keine zusätzliche Bildrotation an; das Bild wird so orientiert, wie es kodiert wurde oder wie es andere CSS-Eigenschaften vorschreiben.

from-image

Standard-Initialwert. 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 gedrehter Kamera aufgenommen wurden. Sie sollte nicht für willkürliche Rotationen verwendet werden. Für andere Zwecke als die Korrektur der Ausrichtung eines Bildes aufgrund der Art und Weise, wie es aufgenommen oder gescannt wurde, verwenden Sie die transform-Eigenschaft mit dem Schlüsselwort rotate, um die Rotation festzulegen. Dies schließt auch alle benutzergesteuerten Änderungen der Bildausrichtung ein oder Änderungen, die für den Druck im Hoch- versus Querformat erforderlich sind.

Wenn sie in Verbindung mit anderen CSS-Eigenschaften verwendet wird, wie z.B. einer <transform-function>, wird jede image-orientation-Rotation vor anderen Transformationen angewendet.

Formale Definition

Formale Syntax

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

Beispiele

Ausrichtung des Bildes anhand von 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. Wenn Sie die image-orientation auf none ändern, können Sie den Effekt 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.