2

I have an image which appears upright when you use a browser to navigate to its URL, but is rotated 90 degrees when I do something like this <img id='img' src=URL>. I don't want it to be rotated. Actually, I have a whole list of images, and some are rotated while most aren't. The URLs don't give me any clue as to which it's going to be.

I understand the issue is something to do with EXIF. I'm not sure if either:

a) The EXIF image rotation property is being accounted for. Therefore I'd want to ignore it using CSS

or

b) The EXIF image rotation property is not being accounted for. Therefore I'd want to use CSS to tell the browser that it should account for it.

The best solutions I've found use exif-js to check the image rotation property, then based off that CSS to correct the rotation. But unfortunately, I can't use JS in this example. I need to do it within the tag with the style parameter.

Context: I'm using WiX, a serverless website builder. It lets me set the html of a text element. So I'm taking advantage of that to show images in a more custom way than WiX would normally let me.

Edit: Other answers have also mentioned image-orientation: from-image but most browsers don't support this.

Alexander Soare
  • 2,825
  • 3
  • 25
  • 53
  • Possible duplicate of [Is there a way to tell browsers to honor the jpeg exif orientation?](https://stackoverflow.com/questions/12026441/is-there-a-way-to-tell-browsers-to-honor-the-jpeg-exif-orientation) – Kewin Dousse Oct 14 '19 at 16:35
  • @KewinDousse apparently most browsers don't support `image-orientation: from-image` – Alexander Soare Oct 14 '19 at 17:02
  • @KewinDousse is the "Possible duplicate" flag reducing my chances of getting an answer for this? – Alexander Soare Oct 15 '19 at 07:14
  • I don't know. But if the only CSS solution available isn't supported and you can't programmatically rotate it, I'd say you're out of luck. – Kewin Dousse Oct 17 '19 at 11:20
  • or, there's an answer out there but people are dodging this because it's marked as duplicate... @KewinDousse – Alexander Soare Oct 18 '19 at 13:20
  • This question has no duplicate flag on it, I only suggested it. Plus, solutions don't just come out of thin air. If you need to rotate an image and can't do in on the server side because you don't control it, and you can't do it client side because you can't run JS and the CSS isn't supported, then there isn't any magical layer that's gonna insert itself between those in order to let you do what you want. If there's 3 possible moments at which it'd be possible to rotate it and every one of them is excluded, then there's no solution left. At least if I understand the question correctly. – Kewin Dousse Oct 18 '19 at 17:08
  • If the images are actually yours, then you can either rotate them beforehand as you want, or even erase the exif metadata. If these are remote images, then the only way is indeed either JS or CSS. If you're *absolutely sure* there's no way to run JS on WiX, then I'm confident in saying your only way is that unsupported CSS property. Whether there's a hacky way to put JS on a WiX website, I don't know. But if there is, then your question changes and if running JS is possible then I'll gladly write an answer that solves your question. – Kewin Dousse Oct 18 '19 at 17:14
  • All of this is assuming your images have absolutely no other way of distinction than the exif data to tell their orientation. Solutions exist outside of the problem you described in your question of course, such as rotating them beforehand, or having the orientation information anywhere else than in their metadata. – Kewin Dousse Oct 18 '19 at 17:21
  • @KewinDousse Appreciate the effort in your answer. It's a shame that CSS property wasn't replaced with an alternative when it deprecated. Actually in the end, my hacky way was to store a list of dims that are more than likely to have the rotation and just rotate those. I solved 90% of the problem with it, which is good enough for my purposes. – Alexander Soare Oct 20 '19 at 11:54

0 Answers0