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

标签 html css browser jpeg exif

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

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

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

最佳答案

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

关于html - 有没有办法告诉浏览器尊重 jpeg exif 方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12026441/

相关文章:

Android 锁屏通知无法双击打开浏览器

javascript - 预加载图像的替代方法

javascript - 什么 HTML5 视频事件指的是正在播放的视频的 currentTime?

javascript - 如何使用javascript点击和关闭子菜单

jquery - 向下滚动时显示 Nav Div

javascript - 使用 Javascript 检测主要插件(Java、Active-X、Flash)的存在

javascript - jQuery 在 clone() 上为输入和类添加唯一标识符

html - 媒体查询 : sending an image from the top to the bottom of the page

html - 想拖动我的 div 而不显示水平滚动

http - 如何从 Firefox 实时获取机器可读格式的 http 响应?