为什么我的网页图像在我的 HTML 中横向显示，但在全屏显示时正确？答案

【问题标题】：Why do my webpage images appear sideways in my HTML but correct when in full screen?为什么我的网页图像在我的 HTML 中横向显示，但在全屏显示时正确？
【发布时间】：2013-11-29 16:57:08
【问题描述】：

如果你看这个页面，你会看到右边的两张图片是横向的：

http://www.disneypinplace.com/beta/pin.php?id=PD78685

但是当您单击它们时，它们会以垂直方式正确显示在全屏视图中。我在我的 HTML img 代码中看不到任何可能导致此问题的错误。

谁能告诉我为什么会这样？顺便说一下，这些照片是用 iPhone 5 拍摄的。

【问题讨论】：

不要渲染大量图像并缩小它们:(真的很慢......
Nick - 我的计划是通过图像处理器运行它们以在上传时缩小它们......但我想先弄清楚这个问题。该网站尚未向公众开放。
第二张和第三张是横向的，第一张是纵向的..
原图也出现在侧面

标签： html iphone image

【解决方案1】：

这是 iPhone 如何导出图像的一个特殊问题。看到这个link 有类似的情况。

计算机/浏览器和 iPhone 软件对相机元数据（有关图像的详细信息，包括纵向/横向）的解释不同，从而导致渲染差异。

我能够在 Pixelmator/Photoshop 中下载最右侧的图像并再次将其另存为 jpg，确保它是纵向的。这使得浏览器可以正确渲染图像并且不会将其旋转 90 度。

【讨论】：

顺便说一句，我刚刚发现您也可以在预览中打开图像（如果您使用的是 Mac）并点击保存...

【解决方案2】：

这些照片是横着拍的吗？例如，您是否尝试过从 Photoshop 编辑和“导出网页”？

也许问题出在图像 EXIF 上（因为您只能正确看到图像，因为浏览器会读取 EXIF 信息并在屏幕上旋转它）。导出它很可能会从图像文件中删除该信息，并且可能会使其正确。

【讨论】：

【解决方案3】：

我为此花了一个小时，我再也不会回来了。 :)

问题

我在三星 GALAXY Tab PRO 8.4 上拍摄了这张照片。它在 Android 模拟器和 FireFox 42.0 中呈现 SIDEWAYS。

修复

我在 IrfanView 中编辑了图片。

我去了 Properties_Settings -> JPG_PCD_GIF -> 取消选中“根据 EXIF 信息自动旋转图像（如果可用）”

它现在可以在 FireFox 中呈现。我还没有检查模拟器。

【讨论】：