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

Question

我有一张垂直拍摄并以这种方式保存的 jpg 图像。它在 Windows Explorer:

中显示为应有的（垂直方向）

我得到这个 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>

...但它显示在 "landscape"（向左旋转 90 度），如您所见 here:

我需要做什么才能使图像拉直并正确显示（垂直）？

img 标签似乎没有方向属性

Answer 1

我对 Meteor 不熟悉，这只是一个猜测。也许 JPEG 文件有它的 EXIF 旋转属性设置 Windows Explorer 正在读取和使用 "soft-rotate" 要显示的图像，而浏览器在引用图像时只是忽略（或副-反之亦然）。

最简单的选择可能是使用 CSS 旋转图像，如 here 所述。

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

或者您可以使用上述应用程序查看文件的 EXIF 属性 here。

最后的办法可能是尝试根据 EXIF 属性使用 JS 旋转图像 here，尽管这仍然假设它与 EXIF 有关系。

不管它是什么，我认为它与文件 and/or 它的元数据有关，而不是与用来引用它的 HTML 有关，但因为我不知道其他 [=31] =] 或 CSS 可能被应用于标签我可能错了。

希望对您有所帮助！

Answer 2

link pjrebsch 做了很多工作。无论出于何种原因，我还必须添加 margin-top 值。现在的代码是：

HTML（添加旋转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?

html

jpeg

image

rotation

orientation