CSS image-orientation：原始图像

从规格https://www.w3.org/TR/css4-images/#the-image-orientation
6.2.在页面上定位图像：“图像取向”特性
图像方向：原始图像
from-image：如果图像在其元数据中指定了方向，例如EXIF，则该值计算为元数据指定的正确定向图像所需的Angular 。如果需要，则如上所述将该Angular 四舍五入并归一化为一个值。如果在其元数据中未指定方向，则此值计算为“0 deg’。
匹配Chrome-Issue：https://bugs.chromium.org/p/chromium/issues/detail?id=158753
但是浏览器的支持还没有出现：https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

通过JS旋转

有一个JS代码段可以做到这一点：https://gist.github.com/runeb/c11f864cd7ead969a5f0

我的结论

我认为使用像imagemagick这样的工具在服务器上旋转图像开销太大。
浏览器可以旋转图像，但Web应用程序需要给予如何显式旋转的建议。
在浏览器旋转中，可以这样做：https://stackoverflow.com/a/11832483/633961

自Chrome 81起，默认情况下会考虑图像的EXIF方向。最新的Safari浏览器（13.1）也可以正常工作。
Firefox还没有完全实现这一点（参见Bugzilla issue #1616169）。
以下是我找到的几个测试页面：

• https://image-orientation-test.now.sh
• https://softov.org/oria/image-orientation

至于标准，image-orientation属性现在在最新的CSS Images Level 3规范草案中被标记为已弃用：

'图像方向'

• 此属性已弃用，对于实现是可选的。*

从 chrome / chrome 版本81的最新更新，它将支持exif方向从图像本身。这意味着当存在于图像中时，exif取向将用于对图像进行取向，除非“图像取向：“none”CSS属性存在。
在此更新之前，您可以使用任何其他变通方法来旋转图像或根据已知的图像方向手动旋转。然后较新的chrome 81会自动旋转图像。如果您需要避免自动旋转，并继续使用旧版chrome使用的相同工作区选项，您可能需要设置image-orientation：none，因为现在默认情况下image-orientation值为 from-image。
image-orientation support chrome 81

我写了一个小php脚本来旋转图像。一定要存储图像，以便在每次请求时重新计算。

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

干杯

正如前面的海报所说，你需要旋转图像本身。但除此之外，您可能还希望在EXIF中设置/重置旋转标记。这样，您就可以避免查看器尊重方向标签将再次旋转它。一个可以编辑EXIF的工具叫做ExifTool，是免费的。

使用https://github.com/blueimp/JavaScript-Load-Image
它包括一个演示index.html文件，可以加载图像并使用正确的旋转正确显示。

可以预先使用工具exifautotran将EXIF方向快速替换为默认方向（1，表示“左上”），并自动旋转图像，使图像看起来与转换前相同。然后，您可以使用在网页中获得的JPG文件，而不必担心这些东西：

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…

请注意，在其自身上使用jpegtran -copy all […]会使其处于先前的方向，这可能会导致图像在某些查看器中旋转两次。exifautotran负责自动清理。