zwork zwork - 1 year ago 75
HTML Question

<img> unwanted photo rotation

I have an image embedded in a table using HTML5. The image is being rotated automatically 90deg counterclockwise, and there is no CSS being applied, nor Javascript (there used to be, hence the

class
parameters on some of the tags, but I commented out the
<style></style>
block in the
<head>
.

The image was created by a PHP script w/ Imagick to scale it down from the original image, but the original image still had the same problem.

Code:

<table>
<tr>
<th>$username has sent you a photo!</th>
</tr>
<tr>
<td>
<img src="IMG_1314_MOD.jpg" width="300" height="225" class="rotate90"/>
</td>
</tr>
<tr>
<td><div class="caption">$caption</div></td>
</tr>
</table>


I tried using the CSS code in this answer and applied it to the
<img>
, but when it rotated, it didn't adjust the table, and covered up the text.

Does anybody know of a solution to this that I could use?

--EDIT--

I used the EXIF extension with PHP to
print_r()
the EXIF headers on the image, and there didn't seem to be any orientation headers. The headers can be found on Pastebin here if you wouldn't mind double-checking, whoever may read this.

Answer Source

Run jhead -autorot on your JPG image. That's what I do to handle autorotation before putting my images on the web.

This will rotate the image as specified by the camera's orientation sensor, then reset the orientation flag so that it will not be accidentally rotated again.

http://www.sentex.net/~mwandel/jhead/usage.html

(Note, I never autorotate my originals, just the scaled versions as part of my script for sending them to the web.)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download