CODEWITHSUNDEEP
html
user3347272
user3347272

Reputation: 167

Html img tag showing portrait image in landscape orientation?

I am displaying lots of similar images in img tags. But browswer is automatically autorotating image in landscape mode. How can we prevent this?

Below is one of sample image. https://fuloop.com/backend/web/upload/post_image/1493385167_1493252982_JPEG_20170426_171917.jpg

Thanks Shyam

Upvotes: 1

Views: 1825

Answers (2)

Nikk Li
Nikk Li

Reputation: 21

I think you can use css image-orientation in FF and Safari. However if you want to fix the orientation in Chrome, I would suggest to use css transform to rotate your image...

Additionally, if you're a vue.js developer, you can simply use this vue-img-orientation-changer to fix the incorrect img orientation.

vue-img-orientation-changer is a vue directive plugin.

Check the example: Fix Img Orientation

Github Repository: vue-img-orientation-changer

Upvotes: 1

kojow7
kojow7

Reputation: 11394

This is because there is EXIF data saved from whatever camera was used to take the image. You can get an image editor or tool that edits the EXIF data to set it to the orientation that you want.

Your linked image shows up for me in portrait mode in Chrome, but in IE it showed up rotated in landscape mode. Firefox, seemed to load the dimensions in landscape mode first but then rotated it into portrait mode. It ended up looking a bit glitchy.

Some image editors such as GIMP will ask if you want to rotate the image upon opening it as it detects the orientation in EXIF is different from the actual orientation. If you indicate that you want GIMP to rotate it, then save it, it should be in the correct orientation.

Upvotes: 0

Related Questions