html显示图片时旋转了90度，为什么？

Question

今天测试遇到了一张神奇的图片：

https://oiijtsooa.qnssl.com/o...

使用链接直接在浏览器中打开能正常显示：

但是加了img 标签显示就旋转了90度：

<img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg" width="100%"/>

怎么会出现这种诡异的现象？

哪位大神能告诉我这是怎么回事？

Answer 1

你图片的 EXIF 里标记了旋转 Rotate 90 CW 直接打开图片 chrome 会自动调整过来。

Answer 2

如 @CRIMX 回答，图片确实携带了 EXIF 的旋转标记。

经过简单搜索，没有找到通过html直接解决此问题的方法。

不过我的图片是使用 七牛云 @七牛云 进行存储的，这就显示出第三方的方便与强大

只需要在链接后添加 imageMogr2/auto-orient 参数，即可根据原图EXIF信息自动旋正。

<img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg?imageMogr2/auto-orient" height="100%"/>

七牛云存储-图片高级处理