How can I get my image to display vertically oriented?

Question

I have a jpg image that was taken vertically and saved that way. It appears as it should (vertically-oriented) in Windows Explorer:

I've got this HTML/Spacebars to display it in my Meteor app:

<template name="nfnoscarsdonut">
  <p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
  <img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>

...but it displays in "landscape" (rotated 90 degrees to the left), as you can see here:

What do I need to do to get the image to straighten up and display right (vertically)?

There seems to be no orientation property for the img tag

score 3 · Accepted Answer · edited May 23 '17 at 12:25

I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).

The simplest option might be to rotate the image using CSS as described here.

If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.

Or you could view the EXIF properties of the file with an application such as one mentioned here.

A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.

Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.

Hope that helps!

I opened it in IrfanView, and it looks fine. – B. Clay Shannon-B. Crow Raven Oct 11 '15 at 04:23 — B. Clay Shannon-B. Crow Raven, Oct 11 '15 at 04:23

score 2 · Answer 2 · answered Oct 11 '15 at 04:43

The link pjrebsch gave pretty much worked. For whatever reason, I also had to add a margin-top value. The code is now:

HTML (added rotate class):

<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>

CSS:

.rotate {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  margin-top: 88px;
}

How can I get my image to display vertically oriented?

2 Answers2