html - 背景图像旋转 - 为什么？

Question

在页面上:https://legionhdk.pl/profil-krwiodawcy/donacje/donacja/3406-robert-kowalewski-08-09-2018有一个带有图像的 div:https://legionhdk.pl/images/leg/donacje/752-IMG-3273.JPG在后台:

.foto {
  width:200px;
  height:200px;
  background-size:contain;
}

<div class="foto" style="background-image:url('https://legionhdk.pl/images/leg/donacje/752-IMG-3273.JPG')"></div>

当我在任何浏览器中打开图像时，它看起来不错，但当它在后台时，它会被旋转。问题是为什么？这个地方的一些照片没问题，但有些照片旋转了。

Answer 1

这里的关键是图像的元数据:

当您使用 iOS 照片应用旋转照片时，它实际上并没有旋转图像本身。相反，它在元数据中设置一个标志，表示“此图像已旋转”。虽然现在有些浏览器已经足够智能，可以读取它，但显然有些浏览器在通过 CSS 加载图像时无法正确处理它。

修复:

使用您最喜欢的桌面照片编辑软件(Photoshop、GIMP 等)打开图像文件并正确设置旋转。