CODEWITHSUNDEEP
htmlimagerotationorientationjpeg
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10267

How can I get my image to display vertically oriented?

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

enter image description here

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

Upvotes: 0

Views: 15302

Answers (2)

B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10267

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;
}

Upvotes: 2

pjrebsch
pjrebsch

Reputation: 144

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!

Upvotes: 3

Related Questions