Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 935
  • Last Modified:

How to prevent Image rotation Html5

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
Ian White
Asked:
Ian White
  • 5
  • 3
1 Solution
 
Kyle HamiltonData ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
oops, i meant, "i could be wrong"
0
 
COBOLdinosaurCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Ian WhiteOwner and FounderAuthor Commented:
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
 
Ian WhiteOwner and FounderAuthor Commented:
It does not happen for most images posted by clients  - just some
0
 
Ian WhiteOwner and FounderAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Ian WhiteOwner and FounderAuthor Commented:
I dont seem to be able to add coldfusion as topic  Should I close this and reopen in coldfusion?
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks for your help. I will repost as a cold fusion problem
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now