html - 有没有办法告诉浏览器尊重 jpeg exif 方向？

Question

我知道 JPG 文件的自动旋转在浏览器中被禁用。

他们不能启用它，因为它会破坏某些网站的布局。

是否有 CSS 属性？或javascript代码来实现？或者是其他东西？或者这个问题的解决方案可能还不存在？

Answer 1

CSS 图像方向:来自图像

来自规范 https://www.w3.org/TR/css4-images/#the-image-orientation

6.2. Orienting an Image on the Page: the ‘image-orientation’ property

image-orientation: from-image

from-image: If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. If necessary, this angle is then rounded and normalized as described above for an value. If there is no orientation specified in its metadata, this value computes to ‘0deg’.

匹配的 Chrome 问题: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