html - 图像显示方向错误

标签 html css image

我工作的公司将他们的一些产品图片存储在 Google 云存储中,我已经能够获取这些图片,但是当将 img 标签放到页面上时,它们似乎处于错误的方向,即横向肖像(在横向模式下拍摄的图像没有问题)。

在新标签页中查看图片时,它们显示正确!

这可能是有原因的吗?不胜感激。

我试过将 img 放在空白页上,没有用 anchor 包裹它,看看是否有影响,但没有。

最佳答案

我猜 OP 因 EXIF 数据而出现问题。如果原始图像包含 EXIF 数据,表明它们应该被旋转,则必须采取特殊措施让网络浏览器在显示页面时解释该数据。在这里讨论:

Is there a way to tell browsers to honor the jpeg exif orientation?

如果为 exif 方向提供的解决方案 Not Acceptable ,OP 将不得不预处理图像以将它们旋转到正确的方向并将它们以这种方式保存在服务器端。然后正确旋转的图像可以在网页上传递。

关于html - 图像显示方向错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57103318/

相关文章:

image - 在“处理”中为单个草图创建多个窗口

Android 褪色边缘消失

html - Bootstrap 导航栏菜单 "lagging"?

html - 选择具有动态类名的 div

当页面由 document.write 渲染时,css 字母间距不起作用

html - 设置图像而不裁剪和拉伸(stretch)

html - shinydashboard 增加仪表板页面的大小

javascript - Twitter个人资料图片 uploader 如何在客户端显示图片预览

html - 为什么 Internet Explorer 和 Microsoft Edge 浏览器上的 HR 标签不是中间屏幕

javascript - 使用在生成的 jpg 之上展平的 CSS3 滤镜拍摄图像快照