为什么我的图片在旋转（Flexslider 或 Slick）？

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

在问题评论中看到这个后：

This is actually a super infuriating issue with Exif data. You can learn more about the JS plugin here. The The exif data contains the rotation, but web browsers do not parse or handle this data. The pixels need to be rotated in some way or another - John Pavek

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

为什么我的图片在旋转（Flexslider 或 Slick）？

Why are my pictures rotating (Flexslider or Slick)?

javascript

jquery

carousel

flexslider

slick.js