如何让我的图像垂直显示？

Question

我有一个垂直拍摄并以这种方式保存的jpg图像。它在Windows资源管理器中显示为（垂直方向）：

我有这个HTML / Spacebars在我的Meteor应用程序中显示它：

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

...但它显示在“风景”中（向左旋转90度），如您所见here：

我需要做些什么才能使图像变直并向右（垂直）显示？

似乎没有img标签的方向属性

Answer 1

我不熟悉Meteor，这只是猜测。也许JPEG文件的EXIF旋转属性设置为Windows资源管理器正在读取并使用＆＃34;软旋转＆＃34;用于显示的图像以及浏览器在引用图像时只是忽略（反之亦然）。

最简单的选项可能是按照here所述使用CSS旋转图像。

如果您在图像编辑器中打开图像，您可以看到图像是否旋转，如果没有，则旋转它，看看它是否对网页上的显示有任何影响。

或者您可以使用提及here之类的应用程序查看文件的EXIF属性。

最后一种方法可能是尝试根据其EXIF属性使用JS来描述here，尽管这仍然假设它与EXIF有关。

无论是什么，我认为它与文件和/或元数据有关，而不是用于引用它的HTML，但是因为我不知道其他HTML或CSS可能应用于我可能错了。

希望有所帮助！

Answer 2

链接pjrebsch非常有效。无论出于何种原因，我还必须添加一个保证金最高值。代码现在是：

HTML（添加了旋转类）：

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