Свойство CSS `image-orientation`

Свойство image-orientation CSS задаёт не зависящую от макета коррекцию ориентации изображения.

Попробуйте

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;
}

Синтаксис

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

Значения

Для этого свойства задаётся одно из следующих ключевых слов:

none

Не применяет дополнительный поворот изображения; изображение отображается в ориентации, заданной в его данных или значениями других свойств CSS.

from-image

Значение по умолчанию. Для поворота изображения в соответствующее положение используются сведения EXIF, содержащиеся в изображении.

Описание

Это свойство предназначено только для коррекции ориентации изображений, снятых камерой, повёрнутой относительно обычного положения. Его не следует использовать для произвольного поворота. Для любых целей, кроме коррекции ориентации изображения с учётом того, как оно было снято или отсканировано, используйте свойство transform с ключевым словом rotate, чтобы задать поворот. Сюда относятся любые изменения ориентации изображения по указанию пользователя, а также изменения, необходимые для печати в книжной или альбомной ориентации.

Если использовать это свойство вместе с другими свойствами CSS, например с <transform-function>, поворот image-orientation применяется до всех остальных преобразований.

Формальное определение

Формальный синтаксис

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

Примеры

Ориентация изображения на основе данных изображения

Следующее изображение повёрнуто на 180 градусов, а свойство image-orientation используется для коррекции его ориентации на основе данных EXIF изображения. Изменив image-orientation на none, можно увидеть эффект от применения свойства.

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;
});

Результат

Спецификации

Совместимость с браузерами

См. также

• Другие связанные с изображениями свойства CSS: object-fit, object-position, image-rendering, image-resolution.
• transform и rotate