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 are CSS frameworks used?

    How to show CSS transitions only on hover?

    How to fit a div container to cover all the remaining space in between?

    How to make gradually changing background in CSS become uninterruptible?

    How to create a table with fixed layout?

    How to grab the element with certain CSS property value inline

    how jquery access dynamic css :before and apply filter:brightness [closed]

    How to align things responsive html CSS

    How to insert a div in between flexbox rows and keep everything responsive?

    How to display text in the middle?

    How to create a folding ribbon heading with inside gradient?

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How to fit inner div inside an outer div

    How to prevent html div from expanding when text size is changed

    How to elasticity of the char length in javascript or css? [duplicate]

    How to change css class for multiple DOM elements with jQuery? [closed]

    How to create a CSS only (vertical) drop-down menu?

    How to put a background video loop on a website HTML/CSS

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    How to push floated element to below another floated element?

    How to make bootstrap row “col-md-4” fullscreen size

    How to start developing Android application with HTML5, CSS, JavaScript and jquery? [closed]

    How can I make html table columns (only the ones with text) evenly spaced

    How do I center a container in my HTML/CSS?

    how to select the first element of each class with css

    CSS class is missed after jQuery replaceWith. How to fix?

    How can i improve my javascript? codepen included

    How to display text over responsive image by css

    How to remove the circle in the background of the impress.js demo

    how to change css property of 2nd & 6rd DIV using jquery