Html 图片竖片变横片解决办法

丝路首页 —— 雨林神话

Html 图片竖片变横片解决办法

李顺亮

2016年12月8日

在Slackware系统里，用Bluefish 编辑器编辑网页时，突然发现写入的Html页面，无论如何处理，在firefox浏览器之中，原本要显示为竖片才正常的图片，居然往一边倒了个90度，变成了横片。

放狗或者百度，开始寻找各种处理办法，可惜都是无解。如，对图像增加css样式设定，即img之中，增加float left之类的东西

如：

或者取消高度，即height的值，等等，都是做无用功。

当然，也有人建议应该用 ul 而不是 div：

<ul class="counter "> <li class="digital">图片或文字</li> </ul>

这也仅是用ul 还是用 div的问题，对图片本身出问题，根本起不到任何作用。

为什么会这样，琢磨了两天。无意之中，在察看图片本身时，弃用geeqie图像处理软件，改用GNU图像处理程序，打开了自己拍摄的图片。

一打开，直接就跳出一个框：

根据EXIF数据，此图像已旋转
你是否想要让GIMP将其旋转为标准方向？

想都没想，立即点击旋转。使用文件→导出(Export)以导出到其他文件格式。

保存新图像之后，再进入Bluefish 编辑器编辑网页，重新把图片写入的Html页面。如：

预览，发现问题瞬间解决。

为什么会这样呢？对疑问进行一番思考之后，觉得是相机拍摄图片之后，导入电脑之时，不知是被看图软件还是自己人为旋转过，导致了以不是标准方向的形式存在。

网页是可控的，但是，一切都还要人脑掌握，并不会对图像自行摆正，于是出现了问题。