CSS object-fit: cover不适用于EXIF方向大于1的JPEG img

基础概念

object-fit: cover 是 CSS 中的一个属性，用于指定元素（如 <img>）的内容应如何调整大小以适应其容器。cover 值会保持图像的宽高比，并将图像缩放以完全覆盖容器，可能会裁剪图像的部分内容。

问题描述

当 JPEG 图像包含 EXIF 方向标签且方向大于 1 时，object-fit: cover 可能无法正确显示图像。这是因为浏览器默认情况下不会考虑 EXIF 方向标签，导致图像显示方向错误。

原因

JPEG 图像中的 EXIF 数据包含了图像的方向信息。方向标签的值从 1 到 8，表示不同的旋转和翻转方向。浏览器在加载图像时，默认不会读取和应用这些方向标签，因此即使设置了 object-fit: cover，图像也可能显示不正确。

解决方法

为了解决这个问题，可以在加载图像之前，使用 JavaScript 读取并应用 EXIF 方向标签。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fix EXIF Orientation</title>
    <style>
        .image-container {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="myImage" src="path/to/your/image.jpg" alt="Example Image">
    </div>

    <script>
        function fixExifOrientation(image) {
            EXIF.getData(image, function() {
                var orientation = EXIF.getTag(this, 'Orientation');
                switch (orientation) {
                    case 3:
                        image.style.transform = 'rotate(180deg)';
                        break;
                    case 6:
                        image.style.transform = 'rotate(90deg)';
                        break;
                    case 8:
                        image.style.transform = 'rotate(-90deg)';
                        break;
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            var img = document.getElementById('myImage');
            fixExifOrientation(img);
        });
    </script>
</body>
</html>

参考链接

EXIF.js - JavaScript Library to Extract EXIF Metadata

应用场景

这个解决方案适用于任何需要处理包含 EXIF 方向标签的 JPEG 图像的场景，特别是在使用 object-fit: cover 或其他 CSS 属性调整图像大小时。

通过这种方式，可以确保图像在应用 object-fit: cover 之前已经正确旋转到正确的方向，从而避免显示错误。

页面内容是否对你有帮助？

有帮助

没帮助

CSS object-fit: cover不适用于EXIF方向大于1的JPEG img

、、

我无法理解我的Angular应用程序出了什么问题。我正在做一个我的三星银河系照片的小画廊。为了有一个好的设计，我使用了"object-fit: cover“css属性。它适用于EXIF "orientation“属性等于1的图像，而不适用于"orientation”属性的其他值(如5或6)。它记录了我的</e

浏览 29提问于2020-07-28得票数 8

2回答

如何使背景图像看起来成比例？

、、、

我有背景图像的登录页面，问题是cus图像看起来不像原始照片：这是页面的HTML/jsx： <img"ba

浏览 15提问于2019-07-23得票数 0

回答已采纳

3回答

垂直中心对齐其父文件中的图像

、

考虑以下HTML/CSS：.container { height: 200px;} height: auto;<div class="container"> <img src="http://www.wallpapereast.com/static/images/HD-Wal

浏览 3提问于2015-12-17得票数 0

回答已采纳

1回答

如何使用CSS调整图像大小以适应其容器

、

我想做一个固定宽度和高度的div，其中包含一个大小未知的子图像。如下所示： ? 我得到的最接近的是max-height: inherit; max-width: inherit，但它改变了纵横比 .parent { width:40vh; overflow: hidden;} max-width: inherit; max-height

浏览 22提问于2020-07-05得票数 1

回答已采纳

1回答

Img不考虑html中的宽度(使用flexbox)

、、、

/></head> <div class="container"> <div class="gallery">

浏览 22提问于2021-09-14得票数 2

3回答

图像显示方向不正确

我为这个令人难以置信的基本问题道歉，但我已经搜索了题库，老实说我找不到类似的问题(或者至少，如果它是可比较的，我对这个问题太新了，看不出其中的相关性)。<img src=&

浏览 2提问于2012-10-06得票数 4

1回答

对象匹配是否破坏了Chrome中的某些图像纵横比？

、、、

我在包装器div中的一些IMG标记上使用object-fit:cover来尝试用图像填充div。我注意到一些文件的纵横比似乎被拉长了，而另一些文件则显示正确。我怀疑这是Chrome中的渲染错误，可能是由具有EXIF旋转元数据的图像触发的。" style="object-fit:cover;width:100%; height:100%;"/> <&

浏览 19提问于2020-07-10得票数 5

1回答

我目前正在为响应式图像使用图片资源集，目前正在寻找一种方法来使其缩放或覆盖整个元素或容器，就像css background-size: cover或object-fit。我读到过object-fit只适用于img标记，有没有替代srcset的方法。我使用的是Drupal8响应图像模块，它呈现了一个picture元素 <source srcset="/aim-beta/sites

浏览 0提问于2017-10-10得票数 0

1回答

对象适配:覆盖不在移动平台上使用ImageCapture.takePhoto

、、、

我试着用object-fit:cover展示拍摄的照片。它在桌面上与Chrome完美地工作。然而，object-fit:cover风格并不适用于安卓系统上的所有设备和仿真器。解决此问题的最小示例可以找到。 <img id="photoImg" />的大小固定在200 * 400 px，以演示object-fit:cover

浏览 4提问于2021-02-25得票数 0

回答已采纳

2回答

如何在父容器中自动调整图像？

、

有内含图片的父容器： position: relative; overflow: hidden; overflow: hidden; <div class="parent"> <imgclass="image" src="">

浏览 13提问于2021-05-19得票数 0

回答已采纳

2回答

为什么我的div不出现在我的形象上面？

、

对此进行了几个小时的故障排除。一定有一个我看不到的简单的原因或解决方案。 position: relative; max-width: 100%;} position: relat

浏览 1提问于2021-10-19得票数 1

回答已采纳

1回答

用css网格创建固定行高/自动列计数网格布局

、

我试图用css网格创建以下布局：到目前为止，我所做的尝试如下： padding: 16px; grid-template-rows: repeat(auto-fill, 200px); height: 100%;} 但我很难让列数动态化。

浏览 4提问于2018-06-26得票数 0

回答已采纳

1回答

协调相互重叠的组件，使它们一起缩放。

、、

试图创建一个具有两个可伸缩组件的高阶组件。高阶组件的设置如下： <Component 1/></>{ background-image：组件1缩小，而组件2保持在该位置。有没有办法让他们一起发展，保持相对的地位？我试过使用来自@material-

浏览 5提问于2022-05-14得票数 0

回答已采纳

4回答

显示尽可能大的图像

如何在不改变图片比例的情况下将图片放大到最大。所以它要么100%宽，要么100%高 <div class="container"><img src=""></div>

浏览 2提问于2021-11-28得票数 1

3回答

HTML CSS

、

我试图通过应用黑色的不透明度0.7在我的图像之上使用:after在我的图像在CSS暗我的图像。但是，它似乎不适合我吗？任何关于它的建议/建议->这个图片将是我的主页的背景。 position:absolute; left: 0; height: 100vh;object-fit</em

浏览 3提问于2022-05-11得票数 0

回答已采纳

5回答

在不知道使用CSS的维度的情况下调整图像的大小并在屏幕上居中

我有一个网页，我想在该网页上显示具有以下约束的图像：图像需要居中。是否只有CSS解决方案才能实现这一目标？否则，使用js可以轻松完成吗？

浏览 5提问于2017-08-11得票数 1

回答已采纳

1回答

如何在Bootstrap 4中降低图像的高度？

、、

我想减少一点的高度，以便图像更适合我的页面。举个例子来说明我的意思： ? 我尝试使用自定义CSS来更改高度，但我的图像看起来很奇怪，而且不合适。我的HTML： <!css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"

浏览 20提问于2020-07-04得票数 0

回答已采纳

3回答

垂直中心全屏幕图像

、、、、

我无法在CSS中定义图像，因为图像依赖于URL参数。: 100%;}div img { height: 100%;我的形象将伸展和变形的高度如果我像这样定义我的图像CSS (只是没有定义高度)： width: 100%;我的图像不会拉伸/变形，但它将从图

浏览 0提问于2016-04-09得票数 0

1回答

将引导转盘中的<img>大小调整为CSS中的父元素

、、、

<div class="carousel-item active"> <img src="img1.png"> height

浏览 14提问于2019-01-30得票数 1

3回答

无法使html5背景视频响应

、

我正在制作一个网页，它的左边有一个导航栏，右边有一个内容区。内容区有一个html5全屏背景视频。一切都很完美，除了背景视频没有响应性。我想要的是视频是全屏的，在每一个屏幕尺寸都是可观看的。很抱歉，如果这个问题之前已经发布过，但我没有从其他答案中找到有效的解决方案。<div class="video-box-shadow"></div> </div>

浏览 1提问于2019-12-24得票数 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CSS object-fit: cover不适用于EXIF方向大于1的JPEG img

基础概念

问题描述

原因

解决方法

参考链接

应用场景

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐