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

none

Wendet keine zusätzliche Bilddrehung an; das Bild wird so ausgerichtet, wie es kodiert ist oder wie es andere CSS-Eigenschaftswerte vorgeben.

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 gedrehter Kamera aufgenommen wurden. Sie sollte nicht für willkürliche Drehungen verwendet werden. Für alle anderen 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 Drehung zu spezifizieren. Dies schließt alle benutzergesteuerten Änderungen der Ausrichtung des Bildes ein oder Änderungen, die für den Druck im Hoch- versus Querformat erforderlich sind.

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

Formale Definition

Formale Syntax

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

Beispiele

Orientierung des Bildes basierend auf Bilddaten

Das folgende Bild wurde um 180 Grad gedreht, und die image-orientation-Eigenschaft wird verwendet, um ihre Ausrichtung basierend auf den EXIF-Daten im Bild zu korrigieren. Durch Ändern der image-orientation-Anzeige auf none 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