So for an introductory assignment to my webdev class, our professor wanted us to make an index.html page for our server that shows a profile of us. That profile should include a picture.
I took a picture on my phone and uploaded it to our server, and was irritated when I opened my page and my face showed up rotated 90 degrees. So I added a transform tag to the style:
<img src="assets/pictures/selfie.jpg" alt="Selfie" style="width: 304px; height: 228px; transform: rotate(90)">
when I showed this to my professor he told me to not use the transform tag to "avoid the client's browser having to rotate it. Just rotate it yourself in the first place".
I tried this in my desktop editor and then reuploaded the photo as well as taking out the transform. Same orientation issue, rotated 90 degrees.
<img src="assets/pictures/selfie.jpg" alt="Selfie of Ryan White" style="width: 304px; height: 228px;">
What is happening here? And how can I fix this orientation issue?
If you're rotating the image via Windows' tools (right-click menu, Windows' Photos, etc.), that's only visible to windows. If you want to actually rotate the image, you'll need to use something like Paint or GIMP to rotate it, then save it that way. That will give you the proper rotation no matter where it's viewed from.