Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to prevent Image  rotation Html5

Posted on 2015-01-02
9
Medium Priority
?
531 Views
Last Modified: 2015-01-03
Portrait pictures get rotated?

http://www.housecarers.com/photo_view2.cfm?mem=2145674015&slide=6

Please how do I Prevent this? - display without rotation. I just want the picture to display as is.

When I look at the original it is OK see below - it is portrait - see here:
http://housecarers.com/pics/2145674015_6.jpg?ref=%227842%22

<IMG ID="DataField40" SRC="/pics/2145674015_6.jpg?ref=4096"  
ALT="House Sitters Pictures from YouthfulRetiree">

Open in new window




Thanks
Ian
0
Comment
Question by:Ian White
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40529089
it has to do with the meta data in the image which was put there by the camera it was taken with. If you only have a few images the easiest way to 'fix' it is to open the images in phoshop and resave.

if these are client images and you have no control over them, you can manipulate the rotation server side.

as far as i remember there is no way to have html5 ignore the rotation, but u could be wrong.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40529090
oops, i meant, "i could be wrong"
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40529249
You might be able to fix it with a CSS transform. Try changing the CSS for the images to include:

-webkit-transform:rotate(90deg); 
transform:rotate(90deg);

Open in new window


If it does not work when applied directly to the images, you can try rotating the container for the images instead.

Cd&
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Ian White
ID: 40529580
They are client posted images dynamically loaded.  So the logic would apply to thousands of pictures, loaded by clients  for the same page .

I am not sure why the meta data of the image would cause it to flip unnaturally? so the picture cant be seen as taken?

I thought maybe it was the css for the page?  Maybe it couldnt fit so it rotated? Not an expert on CSS
0
 

Author Comment

by:Ian White
ID: 40529582
It does not happen for most images posted by clients  - just some
0
 

Author Comment

by:Ian White
ID: 40529588
So this is an example of the same page where the image is ok - for another client

http://www.housecarers.com/photo_view2.cfm?mem=2145661960&slide=4
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40529785
you will need a server solution. the reason only some images appear flipped is becuase the cameras are different. this is meta data set by the camera - nothing to do with CSS.

i could give you a php solution, but it looks like you are using cold fusion, so that would probably be no use to you.

while you can do rotation client side, you would need to wait until the image is loaded to get the exif_data to determine whether to rotate or not. imo, lots of unnecessary work that's better left to the server
0
 

Author Comment

by:Ian White
ID: 40529876
I dont seem to be able to add coldfusion as topic  Should I close this and reopen in coldfusion?
0
 

Author Closing Comment

by:Ian White
ID: 40529889
Thanks for your help. I will repost as a cold fusion problem
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question