青春韶华

浏览器背景图片横过来了?原因是什么,怎么解决?

2023-04-22  本文已影响0人  孤雪心殇

前几天在写网页的时候,发现一个小问题,同一张图片,我用不同的浏览器打开的效果竟然是不一样的
具体情况如下
代码部分

 body {
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url(images/NEKOPARA_CHRONICLE_0076.jpg);
      background-repeat: no-repeat;
      background-size: 100vw 100vh;
    }

在edge浏览器下是这样的:

edge
非常正常
而放到我的星愿浏览器下就不一样了
星愿/IE
图片横过来了???
用IE浏览器试了试,发现跟星愿浏览器一样,也是会横过来。
而用电脑查看这张图片的属性时,长宽像素数值也正确
属性
其实到这一步,我已经不知道怎么往下搞了,但是,之前在网上了解过,图片的详细属性会保存在exif信息里,于是抱着试试的想法,查看了一下这张图片的exif信息
exif
此时,我发现了问题的所在,这张图片的有一个“Rotate 90 CW”属性,这个属性是什么意思呢?
意思就是要顺时针方向(ClockWise)旋转90度。
有了这个线索,再去查找为什么图片会横置就很简单了,经过查询,发现,这是浏览器中广泛存在的一个bug,包括但不限于 Safari 4/5,Firefox 3.x,Opera 10.63,IE 8.0(数据不保证时效性,数据来源56845 - EXIF orientation is ignored - chromium
)

但是既然edge浏览器能正常显示,就说明微软已经修复了这个bug,但是同样使用chrome内核的星愿浏览器为什么不能正常显示呢?
查阅资料后得到:这个bug是微软从Chrome 81开始(在5/13/20稳定),才更新的,更新说明如下图:
(信息来源Support for CSS image-orientation property - Chrome Platform Status (chromestatus.com)

而当时,我的星愿浏览器是7.x版本的,当时使用的是Chromium 80.0.3987.159(现在最新版本已经升级到Chromium: 98.0.4758.139了)
之后去把浏览器升级了一下,果然解决了问题
至此,问题已经解决了,但是又产生了一个小问题:如果在非chrome内核的浏览器中,如何解决这个问题呢?
笔者下去稍微了解了一下,有Exif.js一个JavaScript库,主要用于从图像文件中读取 Exif信息。你可以在浏览器中的图像上使用它,可以从图像或文件输入元素中使用。同时检索EXIF和IPTC元数据。
具体如何使用,还请各位有兴趣的下去自行了解一下啦~
上一篇下一篇

猜你喜欢

热点阅读