Menu
I know that the automatic rotation of JPG files is disabled in browsers.
They can not enable it because it would break the layout of some websites.
Is there a CSS property? or javascript code to achieve that? or something else? or maybe the solution to this problem doesn't exist yet?
779
IrfanView. IrfanView is a great image viewer on Windows, which respects the image Exif info. To view the image Exif info, open an image and click Image -> Information . If the image contains Exif info, you can then click the EXIF info button at the bottom left of the popup window to check the image Exif info.
To fix the EXIF orientation, open the image in an image editing program. Rotate the image to the correct orientation, then save the file and reupload your image. As an alternative, you can simply remove all EXIF data from images in Windows and macOS.
The EXIF orientation value is used by Photoshop and other photo editing software to automatically rotate photos, saving you a manual task.
css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.
from the specs https://www.w3.org/TR/css4-images/#the-image-orientation
6.2. Orienting an Image on the Page: the ‘image-orientation’ property
image-orientation: from-image
from-image: If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. If necessary, this angle is then rounded and normalized as described above for an value. If there is no orientation specified in its metadata, this value computes to ‘0deg’.
Matching Chrome-Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=158753
But the browser support is not here yet: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility
There is a JS snippet to do this: https://gist.github.com/runeb/c11f864cd7ead969a5f0
I think rotating the image on the server with tools like imagemagick is too much overhead.
The browser can rotate the image, but the web application needs to give the advice how to rotate this explicitly.
This explicit in browser rotation could be done like this: https://stackoverflow.com/a/11832483/633961
98
Since Chrome 81, image EXIF orientation is respected by default. Latest Safari (13.1 as of now) is also working correctly.
Firefox hasn't fully implemented this (see Bugzilla issue #1616169).
Here's a couple test pages I found:
As for the standard, the image-orientation property is now marked deprecated on the latest CSS Images Level 3 spec draft:
'image-orientation'
This property is deprecated, and is optional for implementations.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
