Ответ 1
Это может иметь какое-то отношение к метатегам EXIF /TIFF в изображениях.
Один из этих тегов указывает ориентацию изображения. Некоторые фотографии, которые вы загружаете на сервер (например, с iPhone), могут иметь эти теги, а другие (из другого источника/рабочего процесса) могут отсутствовать. Сервер может сохранять или не сохранять эти теги и может читать или не читать теги, чтобы попытаться правильно ориентировать изображение. Аналогичным образом веб-браузер может или не может обратить внимание на эти теги. Если вы загружаете изображения, содержащие теги, результаты, безусловно, будут непредсказуемыми.
Хороший способ узнать, является ли это проблемой, - это загрузить изображение "проблемы" и "хорошее" изображение с сервера и сравнить их. Откройте их в режиме предварительного просмотра и проверьте вторую вкладку инспектора. Там будет отображаться всякая метаинформация. Посмотрите, есть ли у одного изображения информация о ориентации, а другая нет. Если не отображать мета-информацию, то, скорее всего, сервер полностью отключает и не использует его, и вы можете забыть об этом ответе.
Также вы должны сравнивать в разных браузерах. Некоторые браузеры читают эту информацию о ориентации и поворачивают изображение соответственно, другие - нет.
Например, фотография моего iPhone, снятая в портретном режиме, имеет следующие метатеги:
- Высота пикселя: 2,448
- Ширина пикселя: 3,264
- Ориентация: 6 (поворот на 90 ° CCW)
Нативная растровая ориентация - это пейзаж.
Метатаг "ориентация" указывает, что программное обеспечение для чтения изображений поворачивается к портрету для отображения.
Метатаг используется (некоторым) программным обеспечением для изображения, чтобы "правильно" поворачивать изображение на портрет, но игнорируется другим программным обеспечением, которое отображает изображение как ландшафт.
Ситуация сбивает с толку, и для этого нет установленного стандарта (теги - всего лишь подсказка), поэтому при подготовке изображений к онлайн-публикации самым безопасным является удаление этих тегов и физическое вращение изображения до правильной BITMAP перед загрузкой. Если вы пишете серверную часть приложения, вы можете сделать это на сервере. Но очень важно доставлять изображения в веб-браузер в правильной ориентации BITMAP без метаданных ориентации.
Почему это? Потому что даже сегодня разные браузеры используют разные подходы к метатагам.
Изображение iPhone, которое я только что упомянул, выглядит следующим образом:
Google Chrome 24 портрет
Сафари 6 портрет
Firefox 17 пейзаж
Opera 12 пейзаж
Не великое положение дел!