При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.
Что такое image-orientation?
Свойство image-orientation в CSS используется для исправления ориентации изображения, основываясь на его EXIF-данных. Это особенно полезно, когда изображения были сделаны с поворотом камеры, но отображаются неправильно.
Синтаксис
image-orientation: none;
image-orientation: from-image;none— не применяется дополнительная ориентация; изображение отображается как закодировано или в соответствии с другими свойствами CSS.from-image— использует EXIF-данные изображения для определения его ориентации. Это значение является значением по умолчанию.
Глобальные значения
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: unset;Эти значения управляют наследованием и применением значений по умолчанию.
Пример использования
Предположим, у нас есть изображение, сделанное в портретной ориентации, но отображаемое в ландшафтной. Мы можем использовать image-orientation для исправления этого:
#image {
image-orientation: from-image;
}Если изображение не содержит EXIF-данных или они отсутствуют, можно использовать image-orientation: none;, чтобы предотвратить автоматическое применение ориентации.
Важные замечания
- Безопасность:
image-orientation: none;не переопределяет ориентацию изображений с ненадежных источников. - Использование: это свойство предназначено исключительно для исправления ориентации изображений, сделанных с поворотом камеры. Для произвольных поворотов используйте
transform: rotate().
Свойство image-orientation находится в статусе Baseline Widely Available и поддерживается большинством современных браузеров, включая Chrome, Firefox, Safari и Edge.