1

This is a crazy problem, so I have three images here that should explain it all

First, an image that is being rotated 90 degrees in the GUI

enter image description here

Second, the image as shown by chrome's inspector enter image description here

Third, the actual image when viewed through chrome enter image description here

What is rotating this image?! Am I missing meta-tags for rotation that the chrome photo viewer is picking up but not my app. The CSS is all standard, center no-repeat cover...

Jack Franzen
  • 768
  • 7
  • 21

2 Answers2

2

I don't think this is an issue with CSS. Most likely, the image has been taken with a smart phone, or something similar. When the device is rotated it does not actually rotate the image when it's taken (probably because it's too much processing), but it instead sets a flag in the image properties to indicate to the image viewer that the image should be rotated (GIMP will prompt you when you open such a file).

So the problem you're having is that Chrome displays the image correctly, because it know what to do with it, but in the element inspector and your GUI program a more light weight approach to rendering the graphic is used and thus it appears in the original "as is" way - i.e it ignores the image properties hinting the need to rotate.

What you can do is open the image in GIMP or whatever other program you use and save the image in the desired orientation.

I hope that helped.

Alexguitar
  • 722
  • 4
  • 15
  • This is exactly what i meant by some meta tag, does anyone know anything about this meta tag or how to check it in PHP or JS?? – Jack Franzen Aug 04 '15 at 23:59
  • 1
    https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images Check the approved answer for a github link to a library that does what you need. Though, I'd say it's a bit overkill, the easiest solution would be to process the images so that they will be displayed correctly no matter what. – Alexguitar Aug 05 '15 at 00:16
  • Thank you, I've closed the topic as a duplicate and accepted the answer – Jack Franzen Aug 06 '15 at 14:50
0
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

Use this css for that rotated image

tushar sharma
  • 31
  • 3
  • just give your link so i can understand better which issue cause an error – tushar sharma Aug 04 '15 at 22:04
  • It happens at random, so I can't apply that. If you see the differences between the pictures above, you can see it it rotating. I have 0 code that tells it to rotate, so the problem lies in what is causing the rotations now – Jack Franzen Aug 04 '15 at 22:55