img 标签显示方向错误

Question

我在这个链接上有一张图片：http: //d38daqc8uuuvuv.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"/>

你知道发生了什么事吗？

原文由 The Lazy Log 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我忘了在这里添加我自己的答案。我使用的是 Ruby on Rails，因此它可能不适用于您在 PHP 或其他框架中的项目。就我而言，我使用 Carrierwave gem 上传图像。我的解决方案是在上传器类中添加以下代码以在保存文件之前修复 EXIF 问题。

 process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

原文由 The Lazy Log 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

只需将其添加到您的 CSS 中：

 img {
    image-orientation: from-image;
}

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

我想我们将不得不等待，看看浏览器是否会开始支持 image-orientation 。

原文由 Chet 发布，翻译遵循 CC BY-SA 3.0 许可协议