翻转图像 - 仅限浏览器

Question

当我在Windows计算机上查看图像属性（如下所示）时，它清楚地显示width:144和height:256。但是在浏览器中查看时，尺寸会翻转。浏览器中翻转的示例，请参见以下链接：http://jsfiddle.net/pLyg7ug9/2/。直接链接（请注意，它在Chrome中正确加载）：http://pro-cuts.herokuapp.com/images/slideshow/thumb/8_flipped.jpg。是什么导致浏览器翻转宽度和高度？

- Justin Bicknell

Answer 1

这是由于JPEG旋转和EXIF方向导致的。基本上，您的相机有一个传感器，根据您的拍摄方式旋转图像。锁定方向的手机将出现这些问题。

- Ryen Nelsen

---

谢谢提供这个信息，我之前不知道这个存在。你知道有没有办法通过CSS解决这个问题，强制浏览器遵守高度/宽度的要求吗？ - Justin Bicknell

我看到这个存在，但不幸的是只在Firefox中可用 http://caniuse.com/#feat=css-image-orientation - Justin Bicknell

@JustinBicknell 你可以添加多个检查，根据浏览器的不同进行旋转。但是最好的方法是解决问题的根源——图片本身。你只需在图像编辑程序中打开它，如有需要进行旋转，然后重新保存即可。或者在拍照时启用旋转功能，拍摄正确方向的照片。 - Ryen Nelsen

我发现使用这个工具http://www.imagemagick.org/script/mogrify.php可以有效地处理大批量操作。以下命令似乎非常好用：`mogrify -auto-orient *.jpg`。 - Justin Bicknell