时间戳

首页 > 解决方案 > 上传的图片在网站上出现旋转

html - 上传的图片在网站上出现旋转

问题描述

我为我的阿姨服装店做了一个网站，有一个 CMS，她可以在网站上添加新衣服。这样做时，她需要上传服装照片，添加标题和品牌等。

这个过程进展顺利，但最近图像开始在网站上出现旋转。图像上传非常好，在查看文件或查看图像源时，上传的图像似乎没有旋转。因此，似乎某种 CSS 属性正在弄乱其中一些图像。

在尝试自己解决问题时，我发现当我在上传之前裁剪一小部分图片时，它会在网站上正常显示。（只是制作图片的副本，不起作用）。

在此图像中，您会看到顶部图片正常显示，底部图片旋转 -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 数据的图像似乎不起作用。

标签： htmlcssimagerotation

解决方案

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

推荐阅读