image-orientation

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2020 года.

Свойство image-orientation 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;

Значения

none: Не применяет дополнительного вращения изображения; изображение ориентировано как закодировано или как диктуют другие значения свойств CSS.
from-image: Значение по умолчанию. Используется информация EXIF, содержащаяся в изображении, для корректного вращения изображения.

Предупреждение: image-orientation: none; не переопределяет ориентацию изображений из источников без шифрования, как закодировано в их данных EXIF, из-за проблем безопасности. Подробнее в проекте CSS.

Описание

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

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

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

Начальное значение	`from-image`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	угол `<angle>`, округленный до ближайшей четверти оборота от `0deg` и нормализованный, то есть модуль значения по `1turn`
Тип анимации	дискретный

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

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

Примеры

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

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

CSS

#image {
  image-orientation: from-image; /* Can be changed in the live sample */
}

Результат

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

Спецификация
CSS Images Module Level 3 # the-image-orientation

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`image-orientation`	81	81	26	67	13.1	81	26	58	13.4	13.0	81
`from-image`	81	81	26	68	13.1	81	26	58	13.4	13.0	81
`none`	81	81	26	68	13.1	81	26	58	13.4	13.0	81

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation