How to prevent auto-rotating images on iOS on HTML with CSS/Javascript


Tags: javascript,css,image,orientation

Problem :

I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.

On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().

On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).

On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.

I would like to know the following:

  1. Is this a commonly known feature of browsers on iOS or other devices?
  2. Is there a way to disable this functionality using CSS or Javascript?
  3. Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.

EDITS

Making the Title more in the form of a question - Also reformulating the question to be more direct

MORE EDITS

Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/

If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.

In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()



Solution :

To formalize my comments - perhaps you can just sidestep the issue:

  1. If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.

  2. Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.

(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)


    CSS Howto..

    How to place an icon on the first line and text on the second line?

    How to force elements to be in middle?

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to make sure JQuery dynamically inject CSS properly and ready to use?

    how to blur all list-items text except for (this) a:hover

    How to make image appear upon hover over text using css?

    How can I remove a parent with a certain child inside of it (media queries)

    How to override the height of parent node using CSS?

    How can I align text using CSS but perform like printf in C? [closed]

    How do I use CSS to create rounded corners in IE 8? [duplicate]

    How to use numbers from a js file in the css sheet?

    how to place two divs side by side

    How to leave some top gap for H2 title tag with css

    Text-only CSS slideshow

    How to arrange div structure with radius using CSS

    How to view embedded image in a CSS file

    Attempting to show logo using 'content' from CSS

    How to position the GWT dialog to the bottom right corner of the browser?

    How to add and remove background images in css on clicking a link on page

    How to add css to a single mvc Helper method when validation fails - from within the model

    How to control the postioning of a fieldset with css?

    How to Unmerge CSS and JS in magento using MySQL Command

    how i can fit text to an image with css

    Add CSS Style to textarea that shows XML

    CSS: How to make a span link to expand?

    How to override a filter:none in CSS

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    How to make background image with aspect ratio in html and css [closed]

    How do I take code from Codepen, and use it locally?

    CSS how to make 100% height in this case