照片在网页上以横向显示，在其他地方垂直显示。为什么？

Question

我有一些照片是由用户上传的，该用户抱怨在调整大小时将垂直照片更改为横向。事实上，情况就是这样，为了让事情顺利进行，我重新调整了照片的方向并上传到位。但是，当在网页内查看图片时，这没有任何效果！

为了使测试尽可能简单，我创建了一个没有 CSS 的基本网页和一个除了 src 之外没有其他属性的单个 IMG 元素。这继续以横向模式显示照片。复制照片的 URL 并粘贴到另一个选项卡中，照片以垂直模式显示。下载文件并在 Windows 中打开，它以垂直模式显示。

http://www.texashiking.com/test/PhotoOrientation.htm

文件存储在 Azure BLOB 存储中。

我已经在 Chrome 56、Edge 38 和 Internet Explorer 11 上复制了这一点。

这可能是什么原因造成的？

Answer 1

您的图像嵌入了exif orientation data，在呈现页面时可能会被忽略。请参阅this answer 了解更多详情。

基本上，您拍摄图像的相机将其存储为横向，但存储了一些元数据，说明图像需要旋转 270°。在网页中呈现它时，浏览器显然会忽略此标签，但当您直接访问图像时则不会。