Html img标签显示横向纵向图像？

Question

我在img标签中显示了许多类似的图像。但是，浏览器会以横向模式自动旋转图像。我们怎样才能阻止这种情况？

以下是示例图片之一。 https://fuloop.com/backend/web/upload/post_image/1493385167_1493252982_JPEG_20170426_171917.jpg

由于 希亚姆

Answer 1

这是因为从用于拍摄图像的任何相机中保存了EXIF数据。您可以使用编辑EXIF数据的图像编辑器或工具将其设置为所需的方向。

您在Chrome中以纵向模式显示链接的图片，但在IE中，它在横向模式下显示为旋转状态。 Firefox，似乎首先在横向模式下加载尺寸，然后将其旋转为纵向模式。最后看起来有点毛病。

某些图像编辑器（如GIMP）会询问您是否要在打开图像时旋转图像，因为它检测到EXIF中的方向与实际方向不同。如果您指示希望GIMP旋转它，然后保存它，它应该是正确的方向。

Answer 2

我认为您可以在FF和Safari中使用CSS image-orientation。 但是，如果您要在Chrome中固定方向，建议您使用CSS转换来旋转图像...

此外，如果您是vue.js开发人员，则可以简单地使用此vue-img-orientation-changer来纠正错误的img方向。

vue-img-orientation-changer是vue指令插件。

检查示例： Fix Img Orientation

Github存储库：vue-img-orientation-changer