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

by

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

More Related Contents:

  1. Why do browsers match CSS selectors from right to left?
  2. css ‘pointer-events’ property alternative for IE
  3. What is use of ‘initial’ value in CSS?
  4. Browser Caching of CSS files
  5. issue with CSS media queries(scrollbar)
  6. How to disable CSS in Browser for testing purposes
  7. Force browsers to load CSS before showing the page
  8. How do I make Firefox auto-refresh on file change?
  9. How to always show the vertical scrollbar in a browser?
  10. Which browsers support data URIs and since which version?
  11. How can I make this background to see full?
  12. How to make an element width: 100% minus padding?
  13. Change select box option background color
  14. Fix footer to bottom of page
  15. When to use the !important property in CSS [duplicate]
  16. Force flex item to span full row width
  17. Removing body margin in CSS
  18. Google Fonts are not rendering on Google Chrome
  19. Inline elements and line-height
  20. Using CSS to insert text
  21. Rounded table corners CSS only
  22. How does one use the onerror attribute of an img element
  23. Border with a transparent centred arrow
  24. Add outward curving border to elements like this: ◝◟___◞◜
  25. Add border to div increase div width?
  26. HTML/CSS set div to height of sibling
  27. Should Tables be avoided in HTML at any cost?
  28. How to get rid of x and up/down arrow elements of a input date?
  29. HTML CSS Invisible Button
  30. CSS After Element to insert mailto link?

Leave a Comment