html - Is there a way to tell browsers to honor the jpeg exif orientation?

Question

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?

Answer 1

CSS image-orientation: from-image

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

Rotate via JS

There is a JS snippet to do this: https://gist.github.com/runeb/c11f864cd7ead969a5f0

My conclusion

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