照片在网页上以横向显示,在其他地方以垂直显示。为什么?
Photos show up in landscape orientation on a webpage, vertically elsewhere. Why?
我有一些照片是由一位用户上传的,他抱怨说在调整大小时,竖拍照片变成了横向。事实上,情况就是这样,为了让事情顺利进行,我重新调整了照片的方向并上传到位。但是,当在网页内查看图片时,这没有任何效果!
为了尽可能简单地进行测试,我创建了一个没有 CSS 的简单网页和一个 IMG 元素,除了 src 之外没有其他属性。这将继续以横向模式显示照片。复制照片的 URL 并粘贴到另一个选项卡中,照片以垂直模式显示。下载文件并在 Windows 中打开,它以垂直模式显示。
http://www.texashiking.com/test/PhotoOrientation.htm
文件存储在 Azure BLOB 存储中。
我用 Chrome 56 版、Edge 38 版和 Internet Explorer 11 复制了这个。
可能是什么原因造成的?
您的图片已嵌入 exif orientation data which is presumably being ignored when rendering the page. See this answer 以获得更多细节。
基本上,您拍摄图像的相机将其存储为横向,但存储了一些元数据,表明图像需要旋转 270°。浏览器在网页中呈现时显然会忽略此标记,但在您直接访问图像时不会。
我有一些照片是由一位用户上传的,他抱怨说在调整大小时,竖拍照片变成了横向。事实上,情况就是这样,为了让事情顺利进行,我重新调整了照片的方向并上传到位。但是,当在网页内查看图片时,这没有任何效果!
为了尽可能简单地进行测试,我创建了一个没有 CSS 的简单网页和一个 IMG 元素,除了 src 之外没有其他属性。这将继续以横向模式显示照片。复制照片的 URL 并粘贴到另一个选项卡中,照片以垂直模式显示。下载文件并在 Windows 中打开,它以垂直模式显示。
http://www.texashiking.com/test/PhotoOrientation.htm
文件存储在 Azure BLOB 存储中。
我用 Chrome 56 版、Edge 38 版和 Internet Explorer 11 复制了这个。
可能是什么原因造成的?
您的图片已嵌入 exif orientation data which is presumably being ignored when rendering the page. See this answer 以获得更多细节。
基本上,您拍摄图像的相机将其存储为横向,但存储了一些元数据,表明图像需要旋转 270°。浏览器在网页中呈现时显然会忽略此标记,但在您直接访问图像时不会。