img tag displays wrong orientation

by

I found part of the solution. Images now have metadata that specify the orientation of the photo. There is a new CSS spec for image-orientation.

Just add this to your CSS:

img {
    image-orientation: from-image;
}

According to the spec as of Jan 25 2016, Firefox and iOS Safari (behind a prefix) are the only browsers that support this. I’m seeing issues with Safari and Chrome still. However, mobile Safari seems to natively support orientation without the CSS tag.

I suppose we’ll have to wait and see if browsers wills start supporting image-orientation.

More Related Contents:

  1. How to layout images in 3 columns [closed]
  2. Image inside div has extra space below the image
  3. When to use IMG vs. CSS background-image?
  4. Why does my image have space underneath?
  5. What is the effect of encoding an image in base64?
  6. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  7. CSS Display an Image Resized and Cropped
  8. Is there an equivalent to background-size: cover and contain for image elements?
  9. Changing image on hover with CSS/HTML
  10. How can I make all images of different height and width the same via CSS?
  11. How can I display just a portion of an image in HTML/CSS?
  12. Fullscreen responsive background image in CSS
  13. CSS image resize issue
  14. Floating an image to the bottom right with text wrapping around
  15. How can I fill a div with an image while keeping it proportional?
  16. Protect image download
  17. How to make in CSS an overlay over an image?
  18. Scale image to fit a bounding box
  19. How does one use the onerror attribute of an img element
  20. How can I resize an image to a percentage of itself with CSS?
  21. How to “crop” a rectangular image into a square with CSS?
  22. CSS align images and text on same line
  23. How to auto-resize an image while maintaining aspect ratio
  24. download webpage and dependencies, including css images [closed]
  25. CSS Border on PNG image with transparent parts
  26. How to place Text and an Image next to each other in HTML?
  27. Why use a sprite sheet rather than individual images?
  28. How to forcefully print background image in HTML?
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment