Я сделал сайт для моей тети-магазина одежды, у меня есть CMS, где она может добавлять новую одежду в коллекцию на сайте. При этом ей нужно загрузить фотографию одежды, добавить название, марку и т. Д. И т. Д.
Этот процесс идет хорошо, но в последнее время изображения стали появляться повернутыми на веб-сайте. Загрузка изображений в порядке, и загруженные изображения не выглядят повернутыми при просмотре файлов или обращении к источнику изображения. Похоже, что какое-то CSS-свойство портит некоторые из этих изображений.
Пытаясь решить проблему самостоятельно, я обнаружил, что когда я обрезаю небольшой кусочек изображения перед его загрузкой, он будет выглядеть как обычно на веб-сайте. (Просто сделать копию изображения, не работает).
На этом изображении вы видите, что верхнее изображение выглядит как обычно, а нижнее изображение поворачивается на -90 градусов.
CSS-код, используемый на этих изображениях, выглядит следующим образом:
element.style {
background-image: url(*path to image*);
}
.box {
width: 100%;
height: 333px;
background-repeat: no-repeat;
background-size: cover;
border-radius: 7px;
}
Когда вы нажмете на изображение, вы попадете на страницу с дополнительной информацией о продукте. Проблема здесь та же. Разница в CSS между списком одежды и информационной страницей заключается в том, что изображение на информационной странице является img-элементом. В списке это фон div.
Все эти элементы загружаются из базы данных MySQL с использованием PHP.
Я не смог найти ничего в интернете по этому вопросу. Может кто-то помочь мне с этим? Заранее спасибо!
Редактировать: удаление изображения EXIF-данных перед загрузкой не работает.