html - img 标签显示方向错误

Question

我在这个链接上有一张图片:http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

如您所见，这是一张方向正确的普通图像。但是，当我将此链接设置为图像标签的 src 属性时，图像会上下颠倒。 http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>

你知道发生了什么事吗？

Answer 1

我找到了部分解决方案。图像现在具有指定照片方向的元数据。有一个新的 CSS spec for image-orientation .

只需将此添加到您的 CSS 中:

img {
    image-orientation: from-image;
}

根据截至 2016 年 1 月 25 日的规范，Firefox 和 iOS Safari(在前缀后面)是唯一支持此功能的浏览器。我仍然发现 Safari 和 Chrome 存在问题。然而，移动版 Safari 似乎原生支持没有 CSS 标签的方向。

我想我们必须拭目以待，看看浏览器是否会开始支持 image-orientation。