Question

我为我的阿姨服装店制作了一个网站，并拥有一个CMS，她可以在该网站上向集合中添加新衣服。在执行此操作时，她需要上传衣服的照片，添加标题和品牌等。

此过程进行得很好，但是最近图像开始在网站上轮换显示。图像上传非常好，并且在查看文件或查看图像源时上传的图像似乎没有旋转。因此，似乎其中某些类的CSS属性使这些图像混乱了。

在尝试自己解决问题时，我发现，在上传图片之前裁剪一小幅图片时，它会在网站上正常显示。（只是复制图片，是行不通的。）

在this图像中，您看到顶部图片正常显示，并且底部图片旋转了-90度。

这些图像上使用的css代码如下：

element.style {
     background-image: url(*path to image*);
}

.box {
     width: 100%;
     height: 333px;
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 7px;
}

单击图像后，您将被带到有关该产品的更多信息的页面。问题在这里是相同的。服装列表和信息页面之间CSS的区别在于，信息页面上的图像是img元素。在列表中，它是div的背景。

所有这些项目都是使用PHP从MySQL数据库加载的。

在这个问题上，我在互联网上找不到任何东西。有人可以帮我弄这个吗？预先感谢！

编辑：在上传之前剥离EXIF数据的图像似乎无效。

Answer 1

如果图像中有虚假的EXIF数据，则会发生类似的情况。有些浏览器会解释这些信息，有些则不会。最好的做法是，在上传之前或将其存储在服务器上之前，先从计算机上的所有EXIF数据中删除图像。

上传的图片在网站上显示为旋转

1 个答案: