img标签显示错误的方向
我在这个链接有一个图片： http : avatars/216/2014-02-1917.13.48.jpg
正如你所看到的，这是一个正确的方向正确的图像。 但是，当我设置这个链接到我的图像标签的src属性，图像变得颠倒。 http://jsfiddle.net/7j5xJ/
<body> <img src="avatars/216/2014-02-1917.13.48.jpg" width="200"/> </body> 你有什么想法是怎么回事？
我find了解决scheme的一部分。 图像现在具有指定照片方向的元数据。 有一个新的面向image-orientation CSS规范 。
只需将其添加到您的CSS：
img { image-orientation: from-image; }
根据截至2016年1月25日的规定，Firefox和iOS Safari（仅支持前缀）是唯一支持这一function的浏览器。 我仍然看到Safari和Chrome的问题。 然而，移动Safari似乎本身支持没有CSS标签的方向。
我想我们将不得不等待，看看浏览器是否会开始支持image-orientation 。
你的形象实际上是倒过来的。 但它有一个元属性“方向”，告诉观众它应该是旋转180度。 一些设备/观众不遵守这个规则。
在Chrome中打开它：正确的方式在FF中打开：正确的方式在IE中打开：颠倒
在Paint中打开它：颠倒在Photoshop中打开它：正确的方式。 等等
我忘了在这里添加我自己的答案。 我正在使用Ruby on Rails，所以它可能不适用于PHP或其他框架中的项目。 在我的情况下，我使用Carrierwave的gem上传图像。 我的解决scheme是将下面的代码添加到上传类，以在保存文件之前修复EXIF问题。
process :fix_exif_rotation def fix_exif_rotation manipulate! do |img| img.auto_orient! img = yield(img) if block_given? img end end
这是你的三星手机所包含的EXIF数据。
一个简单的方法来解决这个问题，无编码，是使用Photoshop的保存为Web导出function。 在对话框中，可以select删除全部或大部分图像的EXIF数据。 我通常只是保持版权和联系信息。 此外，由于直接从数码相机传来的图像大大超出了网页显示的范围，因此无论如何都要通过Save for the Web缩小尺寸。 对于那些不懂Photoshop的人来说，我毫不怀疑有一些在线资源来调整图像的大小，并剥离任何不必要的EXIF数据。
使用外部样式。 在html表格中给类标签。 在样式表中使用点运算符，然后写下面的代码
.rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
