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:
- Is this a monly known feature of browsers on iOS or other devices?
- Is there a way to disable this functionality using CSS or Javascript?
- 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: /
If you click the link on a desktop puter, 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()
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:
- Is this a monly known feature of browsers on iOS or other devices?
- Is there a way to disable this functionality using CSS or Javascript?
- 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/5JKgn/
If you click the link on a desktop puter, 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()
- Have you tried just setting the images height/width to auto along with max-height/width? – monners Commented Jan 24, 2014 at 10:11
- @monners That might be acceptable - but please take a look at the fiddle - I want the popup to show the image centered in the viewport, and the photo to be resized so that it will be visible no matter how big your screen is (i.e. really small on an iphone) – codefactor Commented Jan 25, 2014 at 7:05
- Check out my answer below, is that what you're after or have I missed something? I'm happy to update if necessary. – monners Commented Jan 25, 2014 at 7:14
- On the photo storage code I've done before, we've used the EXIF data to correct the photo orientation, either before storing it or when serving it back. Is there a reason you wouldn't want to do this? – brichins Commented Jan 30, 2014 at 17:54
- 1 @brichins Perhaps I can explicitly remove the EXIF data? If client insists that the output always respect the actual storage of the photo, right? At this point I would prefer that rather than have output differ based on which browser you use! – codefactor Commented Jan 30, 2014 at 18:32
4 Answers
Reset to default 4OK I'll try to answer this one:
Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
For more info on EXIF see Wikipedia.Not that I know of.
Yes, you should be able to access the EXIF data and determine orientation and dimensions.
Nr. 3 needs a little more explanation:
You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin).
The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.
Using that information you can determine the orientation:
Value | Orientation
------|----------------------
1 | horizontal (normal)
2 | flip horizontal
3 | rotate 180°*
4 | flip vertical
5 | transpose
6 | rotate 90°*
7 | transverse
8 | rotate 270°*
* rotation is counter clockwise
That should enable you to at least swap width / height for your <img> if need.
Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.
To formalize my ments - perhaps you can just sidestep the issue:
If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.
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)
You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:
.ui-popup-container {
width: calc(100% - 40px); /* simulates a 20px margin */
}
.ui-popup-container img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Here's an updated Fiddle
Use media queries for desktop browsers and set the css for the images to 100% height and auto width.
@media (min-width: 900px)
{
img {width:auto; height:100%;}
}
You may even consider using these variables instead of calculating them for the mobile site