HTML image is rotated in Microsoft Edge

Question

I have an image on my website, this is its source:

<p>
    <img src="images/image.jpg" style="width: 50%;" />
</p>

In Chrome and Firefox, the image displays correctly (same way as it is uploaded on server). However, in Edge, the image is rotated 90 degrees. When i download the image, it is always rotated correctly, even if I download it from Edge.

I have never encountered this issue before. Any solutions?

Images often have meta data attached, specifically an "orientation" property, which tells the device what orientation the camera was in when the photo was taken. Chrome and Firefox are probably using this property to workout how the image should be displayed, whereas Edge is not. Related: https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation — Turnip, Jun 21 '20 at 17:54
I believe that was the issue. The image WAS originally rotated 90 degrees, I just changed the orientation before. So now I managed to solve this issue by simply opening the image in MS Paint, rotating left, then right again, and saving as a new image. Then re-upload to server and it worked like a charm. Thanks! If you add an answer, I will accept it. — P. Paul, Jun 21 '20 at 18:10

score 1 · Answer 1 · answered Jun 21 '20 at 17:43

That's an incredibly odd behavior. Though this is not a good practice at all, in case of urgency I would address Edge specifically while looking for a permanent solution.

As per an answer here by @paulo-roberto-rosa, Edge is the only one that supports the selector -ms-ime-align. Therefore, you can try rotating it back to its position using a support query:

@supports (-ms-ime-align: auto) {
  .img {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
  }
}

HTML image is rotated in Microsoft Edge

1 Answers1