Question

我尝试使用FlexSlider和Slicky，但每侧都出现同样的问题：我的肖像照片以错误的方式显示。

如您所见，当您使用照片查看器直接打开照片时，照片将以纵向模式拍摄：

你知道发生了什么吗？这是一个视口的问题吗？

这是我的代码，非常简单：

<html>
  <head>
    <title>Photo Selector</title>
    <link rel="stylesheet" type="text/css" href="resources/flexslider/flexslider.css"/>
    <meta charset="UTF-8">
  </head>

  <body>
    <section id="slider">

      <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="my-portrait.png" alt="" />
            </li>
        </ul>
      </div>

    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="resources/flexslider/jquery.flexslider.js""></script>

    <script type="text/javascript">
      $(document).ready(function()
      { 
        $('.flexslider').flexslider({});
      });
    </script>

  </body>
</html>

Answer 1

在问题注释中看到此内容后：

这实际上是Exif数据令人毛骨悚然的问题。您可以在此处了解有关JS插件的更多信息。 exif数据包含旋转，但是Web浏览器不解析或处理此数据。像素需要以某种方式旋转-John Pavek

我旋转了预览（macOS）中的图像，直到正确定向并保存为止。图像在Slick中正确显示。我没有在任何Windows或Linux应用程序中尝试过它。绝对不是一个长期的解决方案，但至少在（如果和何时）在Exif插件中修复该错误之前，它是有帮助的。

为什么我的照片会旋转（Flexslider或Slick）？

1 个答案: