CODEWITHSUNDEEP
htmlcssimageorientation
P. Paul
P. Paul

Reputation: 403

HTML image is rotated in Microsoft Edge

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?

Upvotes: 4

Views: 1773

Answers (1)

Rodrigo M. F. Castilho
Rodrigo M. F. Castilho

Reputation: 152

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);
  }
}

Upvotes: 1

Related Questions