开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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和background-size——CSS图片尺寸控制&应用场景

[post18image1.jpeg] 一张好看的照片和一张被挤压的图片的对比为什么会发生这种情况？一张图片会有一个长宽比，浏览器会用这个图片来填充包含框。...CSS object-fit object-fit属性定义了被替换的元素（如img或video）的内容应如何调整大小以适应其容器。object-fit的默认值是fill，这可能导致图像被挤压或拉伸。...[post18image8.jpeg] 大多数情况下，使用默认值（例如，"center "或 "50% 50%")。当容器的长宽比在垂直方向上较大时，top和bottom关键字也会起作用。...[post18image14.jpeg] 一个没有object-fit的用户头像和有object-fit: cover的用户头像。...友好地提醒一下在img元素和CSS background之间选择的可访问性问题。如果图像纯粹是装饰性的，那么就选择CSS背景。否则，img元素更合适。我希望你觉得这篇文章很有用。谢谢你的阅读。

3K4 2

让图片完美适应：掌握 CSS 的object-fit与object-position

object-fit: cover cover 值强制图像完全覆盖容器的区域，尽可能多地显示图像，而不会扭曲它： img { width: 100%; height: 100%; object-fit...与object-fit: cover不同，我们的图像不会被强制在至少一个轴上完全可见。原始图像的宽度和高度都大于内容框，所以它在两个方向上都溢出，如下图所示。...如果我们的容器比图像大，none 会占主导地位，图像会保持其自然大小，而不是在一个方向上填充容器 object-fit: fill 如果我们在演示中将 object-fit 值更改为 fill，就好像根本没有设置...例如，我们可以将以下CSS应用于图像，而不需要任何周围的 div： img { width: 300px; height: 300px; object-fit: contain; } 尝试更改上面的...以下演示将我们的图像分配给一个特定的、灵活的网格区域： img { width: 100%; height: 100%; object-fit: cover; grid-row: 2 /

6821 0

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果...下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另一张高度大于宽度） 1、背景图显示正方形效果的做法首先还是从背景图的做法说起...2、img标签显示正方形效果的做法首先、也是需要设置img标签的宽度和高度是一致的，另外需要用到一个关键的css属性——object-fit:cover。下面还是直接贴出代码: .img-1 { width: 200px; height: 200px; object-fit: cover...: cover; } img标签的做法 <img src="images/img1.jpg" class="img

2.4K6 0

新提案，初识CSS的object-view-box属性

在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。...有了 object-view-box，我们就能用inset从四边（上、右、下、左）画一个矩形，然后应用object-fit: cover来避免变形。... img { aspect-ratio: 1; width: 300px; object-view-box:...我处理的图像大小为 1194 × 1194 px. img { aspect-ratio: 1; width: 300px; } 使用上述CSS，图片的渲染尺寸将是 300×300px。...img { aspect-ratio: 1; width: 300px; object-view-box: inset(25% 20% 15% 0%); object-fit

9172 0

CSS3 object-fit和object-position

趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。这两个奇葩的属性是搞毛的呢？...替换元素其实是：其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比：img元素的内容通常会被其src属性指定的图像替换掉。...1、object-fit 语法： object-fit: fill | contian | cover | none | scale-down; fill ：默认值。....cover{ object-fit:cover; .none{ object-fit:none; .scale{ object-fit:scale-down...（如果不熟悉background-position，可以瞄瞄这里《CSS3 Background 》）例如：替换元素位于内容区域的左上角 img{ object-fit: contain; object-position

9041 0

CSS3 object-fit和object-position

趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。这两个奇葩的属性是搞毛的呢？...替换元素其实是：其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比：img元素的内容通常会被其src属性指定的图像替换掉。...1、object-fit 语法： object-fit: fill | contian | cover | none | scale-down; fill ：默认值。...:#000; .fill{ object-fit:fill; .contain{ object-fit:contain; .cover{ object-fit...（如果不熟悉background-position，可以瞄瞄这里《CSS3 Background 》）例如：替换元素位于内容区域的左上角 img{ object-fit: contain; object-position

1.1K5 0

10个CSS技巧，极大提升用户体验

如果你想在文本被选中后添加一些额外的样式，你可以使用::selection 。::selection CSS伪元素将样式应用于文档中被用户突出显示的部分（比如在文本上点击和拖动鼠标）。但要记住。... ...为了保持图像的原始长宽比，我们可以使用 object-fit: cover 。...img { width: 128px; height: 128px; object-fit: cover; } object-fit 的CSS属性设置一个被替换的元素的内容，如或<...medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%; } 这样，当 img 元素中的图片链接无法加载图片时

8051 0

现代图片性能优化及体验优化指南

1200w, > 解析一下： sizes = “(min-width: 600px) 600px, 300px" 的意思是：如果屏幕当前的 CSS 像素宽度大于或者等于 600px，则图片的 CSS...ul li img { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; } 利用 object-fit: cover，...object-fit 的取值有 fill、none、contain、cover，与 background-size 类似，可以类比记忆。...ul li img { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50%...设置一个默认的高宽： img { margin: 8px; width: 300px; height: 200px; object-fit: cover; } 这样，再不添加

1.5K3 0

Vue动态绑定class | 类似微信朋友圈功能的实现

>1)},{'gui-comments-image-lt1':(item.enclosures.length==1)}]" v-for="(img, indexImg) in...-- 图片数量大于1，给定image固定高度和margin，这里的行内样式其实我在class里面也写得有，但是不知道为啥绑定的没用，必须写行内 --> <image v-if=...aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。...当时使用image实现图像自适应的时候，设置mode="aspectFill" CSS object-fit 属性 object-fit 属性可接受如下值： fill - 默认值。...cover - 调整替class="gui-comments-image-pic-gt1"换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。

7103 0

使用 object-fit 属性完美过渡图片

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度，一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等在我们工作中，经常会遇到附件上传...1、先让我们看一下 object-fit 属性的值： 2、我们新建一个 html 文件，引入几张高度不一的图片： CSS属性 object-fit.../Images/1.jpg"> <img src="....: cover 样式：此时图片能保持原有尺寸比例 5、如果想改变图片的显示位置，我们可以对其设置 object-position: right top 属性： 6、我们还可以使用 object-position...width: 400px; height: 200px; object-fit: cover; object-position: right top;

1791 0

web 图像技术：前端引入图片的各种方式及其优缺点

对于，我们还可以使用的一组很好的特性object-fit和object-position。它们可以控制的大小和定位，就像CSS背景图像。...object-fit 值有：fill, contain, cover, none, scale-down。...例如： img { object-fit: cover; object-position: 50% 50%; } CSS背景图片使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素...这非常类似于 CSS 中的object-fit: cover或background-size: cover。可访问性问题关于SVG 的可访问性，这使我想起了元素。...: -1; width: 100%; height: 100%; object-fit: cover; } .hero:after { content: "";

5.1K2 0

css案例——图片自适应盒子大小（不变形）

一、案例说明一个100*100固定盒子里面放有图片，不管插入的图片大小如何，让他不变形的占满盒子。 1.最开始写法：图片图片这样的话图片会变形。...只需要加一句话即可object-fit: cover;。保持其宽高比的同时填充元素的整个内容框.。图片会有所裁剪。图片二、案例代码 <!...solid red; } div img{ width: 100%; height: 100%; object-fit: cover; }

1.1K2 0

全栈之前端 | 9.CSS3基础知识之图像元素样式学习

object-fit 属性: 指定可替换元素（例如：或）的内容应该如何适应到其使用高度和宽度确定的框。...object-fit: cover; # 被替换的内容在保持其宽高比的同时填充元素的整个内容框。...{ object-fit: cover; } .contain { object-fit: contain; } .fill{ object-fit: fill; } .scale{...温馨提示：背景图片在绘制时，图像以 z 方向堆叠的方式进行，并且先指定的图像会在之后指定的图像上面绘制（即顶层显示）。...;base64, data:image/jpeg;base64, data:image/x-icon;base64,<base64

2281 0

7b2美化-添加用户展示模块

src="https://img1.baidu.com/it/u=3241671413,1544035113&fm=26&fmt=auto" alt="南山养鹿人" class="i-cover" style...src="https://img.zcool.cn/community/01a9125a992777a801219586fd4ca0.jpeg@520w_390h_1c_1e_2o_100sh.jpg... 以下代码放入你的css...{ width: 100%; height: 100%; object-fit: cover; } .index-creator-list .i-banner .avatar-wrap {

3932 0

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

的优点在于，可以针对特定视口大小将其扩展为具有多个版本的图片。例如，这可用于商品图片。...Demo 1.5 调整图片的大小 ? 我们可以使用的一大优点就是 object-fit 和 object-position 属性。...object-fit 的可能值为：fill，contain，cover，none，scale-down 可以这样使用： img { object-fit: cover; object-position...CSS背景图片当使用CSS背景显示图片时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图片的主要用途应该是用于装饰目的。 2.1 如何使用CSS背景图片简单来说，我们需要一个元素。...这非常类似于CSS中的 object-fit:cover 或 background-size:cover。 3.1 可访问性问题关于SVG的可访问性，这使我想起了元素。

5.6K2 0

详解瀑布流布局的5种实现及oject-fit属性，附源码

object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。...cover：会保持比例进行缩放，内容的尺寸一定会大于等于容器，然后进行裁剪。 none：保持图片的原始尺寸。而 scale-down有两种表现方式所以我们单独来看。 ?...而张鑫旭大大在半深入理解CSS3 object-position/object-fit属性一文中也指出：元素其实与内容是相互独立的。相当于一个外壳包裹着内容。...100%; height: 200px; object-fit: cover; } } 此时你会发现，每一行的图片都得到了很好的显示效果。...优势：css 设置简单，渲染高效。劣势：会损失图片的一部分可见区域。到此，我们介绍了图片的显示特性以及如何利用 object-fit进行内容的控制。

1.2K2 0

手把手教你实现一个图片压缩工具（Vue与Node的完美配合）

img.height ); } let data = cvs.toDataURL("image/jpeg...{ width: 100%; height: 60vh; object-fit: contain; } } .face { margin-top: 30px; .container1...知道这些还不够，你还要知道怎么从依赖库下载依赖，这里需要另外下载的依赖是exif-js。一个JavaScript库，用于从图像文件中读取EXIF元数据。...您可以通过图像或文件输入元素在浏览器中的图像上使用它。EXIF和IPTC元数据均被检索。该软件包还可以在AMD或CommonJS环境中使用。...备注；使用exif.js依赖的作用是为了防止在IOS系统中拍照上传图片旋转90度问题。

7683 0

如何打造一个高效适配的H5

1、contain 模式：以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容，窗口与内容的宽度比或高度比之间较小者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的两侧出现留空部分。...2、cover 模式：以内容中心为基点按照窗口的宽高比等比缩放以适配窗口，窗口与内容的宽度比或高度比之间较大者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的两侧超出窗口被裁剪，这种模式不会出现「contain...图1 中的图片适配处理，采用「cover 模式」适配形式。实现效果核心代码如下： ? 2、同时基于水平方向和垂直方向居中的层，比如页面正文内容部分（图2）。 ?...4、大于屏幕的层，可实现跟随手势移动场景画面，比如（图4）。 ?...当页面内容不适合方向旋转展示，此时就不要无脑适配，有两个方式可以选择：找设计师出一版另一方向的响应式设计稿然后制作成响应式页面；出现提示方式让用户旋转回支持的方向，比如（图5）。 ?

9994 0

那些不常见，但却非常实用的css属性(整理不易)

来源：https://segmentfault.com/a/1190000022851543 1、-webkit-line-clamp 可以把块容器中的内容限制为指定的行数。...cover 覆盖图片不会变形，图片会按照自身比例进行缩放，整个图片放入父容器中，按照图片最短的边，纳入父容器为基准。...较长的边会溢出 object-fit: cover; none 和父容器的宽高没关系。展示其图片最原始的宽高比，以自身图片的“中心”为基点，放置到父容器的“中心”位置。...大写字母变体字符通常被设计成用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。 ?...不同在于，width 是绝对的水平方向，height 是绝对的竖直方向；而 inline-size 是相对的水平方向，可通过 writing-mode 模式，改变方向 ?

1.9K1 0

前端运用图片的技巧总结

object-fit的可能值有：fill, contain, cover, none, scale-down 它可以这样使用。...img { object-fit: cover; object-position: 50% 50%; } 现在我们已经对元素做了一个介绍，现在是时候继续前进，探索第二个技巧了。...这与 CSS 中的 object-fit: cover 或 background-size: cover 非常相似。可访问性关注的问题说到SVG的可访问性，这让我想起了元素。...它是静态的还是会动态变化（例如来自CMS）？ Hero - 解决方案1 通过使用多个CSS背景，我们可以有一个用于叠加，另一个用于实际图片。请看下面的CSS。...: -1; width: 100%; height: 100%; object-fit: cover; } .hero:after { content: ""; position

2.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭