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

【问题标题】：How can I get my image to display vertically oriented?如何让我的图像垂直显示？
【发布时间】：2015-10-10 14:46:14
【问题描述】：

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

我有这个 HTML/空格键可以在我的 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 标签似乎没有方向属性

【问题讨论】：

标签： html image rotation orientation jpeg

【解决方案1】：

我不熟悉 Meteor，这只是一个猜测。也许 JPEG 文件设置了其 EXIF 旋转属性，Windows 资源管理器正在读取并使用它来“软旋转”图像以进行显示，而浏览器在引用图像时会简单地忽略它（反之亦然）。

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

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

或者您可以使用应用程序（例如提到的here）查看文件的 EXIF 属性。

最后的手段可能是尝试根据其 EXIF 属性使用 JS 旋转图像，如 here 所述，尽管这仍然假定它与 EXIF 有关。

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

希望有帮助！

【讨论】：

我在IrfanView中打开了，看起来不错。

【解决方案2】：

pjrebsch 提供的链接非常有效。无论出于何种原因，我还必须添加一个 margin-top 值。现在的代码是：

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

【讨论】：