CSS

Question

这是一个疯狂的问题，所以我在这里有三张图片应该解释一下

首先，在GUI中旋转90度的图像

其次，chrome的检查员显示的图像

第三，通过chrome查看实际图像

什么是旋转此图像？！ 我是否缺少用于旋转的元标记，Chrome照片查看器正在拾取但不是我的应用程序。 CSS是标准的，中心无重复的封面......

Answer 1

我不认为这是CSS的问题。 最有可能的是，图像是用智能手机拍摄的，或类似的东西。当设备旋转时，它实际上不会在拍摄时旋转图像（可能是因为处理太多），而是在图像属性中设置一个标记，以向图像查看器指示图像应该旋转（GIMP将提示当你打开这样一个文件时）。

所以你遇到的问题是Chrome正确显示图像，因为它知道如何处理它，但在元素检查器和GUI程序中使用了更轻量级的渲染图形的方法，因此它以原样“按原样”显示 - 即它忽略了暗示需要旋转的图像属性。

您可以在GIMP或您使用的其他程序中打开图像，并以所需方向保存图像。

我希望有所帮助。

Answer 2

    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

将此css用于旋转的图像