程序员经验分享-hwhale

对象适配是否会破坏 Chrome 中的某些图像长宽比？

2024-03-24

I'm using object-fit:cover on some IMG tags within a wrapper div to try to fill a div with the image. I've noticed that some files seem to have their aspect ratios stretched, while others are displayed correclty. This occurs specifically in Chrome (I'm observing it on version 83). Display issue on Chrome It works ok on Edge (and Firefox): Display ok on Edge

我怀疑这是 Chrome 中的渲染错误，它可能是由具有 EXIF 旋转元数据的图像触发的。

这是一个演示 -https://codepen.io/mark_keo/pen/MWKXggz https://codepen.io/mark_keo/pen/MWKXggz

<div>
  Image which breaks:<br/>
<div style="width:400px; height:300px; display:inline-block;">
  <img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kms-au.appspot.com/sites/mc-spares/assets/e0b26d28-353a-4e8b-b23b-b89685fea303/5FE7A3BC-52C5-4157-9FA8-E48826E89352.jpeg" style="height:300px;"/>
</div>
<div>
  Image that works:<br/>
<div style="width:400px; height:300px; display:inline-block;">
  <img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="object-fit:cover;width:100%; height:100%;"/>
</div>
<img src="https://storage.googleapis.com/kmsstaging-au.appspot.com/sites/mc-spares/assets/a1169254-0bd1-46ed-89bf-6b4535006e49/x1d-xcd45-04.jpg" style="height:300px;"/>
</div>

那么 CSS/HTML 是否有错误，或者这是浏览器错误？


看起来这是一个浏览器错误。我已将此事报告给铬错误跟踪器 https://bugs.chromium.org/p/chromium/issues/detail?id=1103905#c2，并且已被另一位测试人员复制。它似乎是在 Chrome 65 之后引入的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

Googlechrome

objectfit

对象适配是否会破坏 Chrome 中的某些图像长宽比？ 的相关文章

  • 如何在Eclipse中集成CSS预处理？ [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资

  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index

  • 使用 javascript 更改 div 颜色

    div style height 20px width 100 background color 000000 div br

  • 如何向我的网站添加 Google 搜索框？

    我正在尝试将 Google 搜索框添加到我自己的网站 我希望它搜索谷歌本身 而不是我的网站 我曾经有一些代码可以工作 但现在不再工作

  • HTML 属性不带引号？

    我一直认为html的属性中需要引号 div class service definition or div class service definition 但最近我注意到 w3 验证器不会将以下内容识别为错误 div class serv

  • 在 javascript、jQuery 或 css 中，如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example

  • GWT - 如何组织项目以拥有多个网页以及它们之间的导航

    我是 GET 的新手 顺便说一句 它给我留下了深刻的印象 并且发现它对于像我这样熟悉 C NET 桌面技术并愿意编写 Web 应用程序的人来说非常有吸引力 我根据 GWT Eclipse 向导生成的示例启动了自己的项目 该项目生成带有面板的

  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源？

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l

  • 更快地开发和测试打印样式表的方法（避免每次都进行打印预览）？

    这是我现在的流程 保存对 print css 的更改 打开浏览器并刷新页面 右键单击并选择 打印 gt 打印预览 Firefox 但实际上是任何浏览器 第三步让我烦恼 我想知道是否可以通过插件或其他东西将其从流程中删除 只需选择以打印媒体形

  • 如何仅在 css/html 中强制在单词之间换行？

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w

  • 如何向 Rails 应用程序添加自定义字体？

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底

  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi

  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow

  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视

  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是

  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全

  • 如何让div与包含td的高度相匹配？

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此

  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘

  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐

  • 在 Windows 上使用 Python 3.7 安装 pycairo

    我正在尝试安装 pycairo 尽管我在互联网上找到了这些内容 但我无法安装它 我确实 pip install pycairo 但它要求我安装 Visual Basic Build Tool 我做到了 但当时不起作用 我尝试了在网上找到的很

  • C++编译引入错误

    我在 Visual Studio 2010 中有一个多线程 C windows 项目 它使用 Qt 5 1 1 和 OpenCV 2 4 8 当我构建它时Debug模式一切运行正常 但是当我构建它时Release模式下程序崩溃 两种配置几乎

  • Keycloak/Undertow/JBoss-CLI - 从环境变量设置“web-context”

    我对 Wildfly Undertow 和 JBoss CLI 设置 Keycloak 的 Web 上下文有疑问 环境变量似乎并未在 undertow 本身中得到解决 但其他环境变量似乎已得到解决 我创建了以下 CLI 脚本 subsyst

  • Spring MVC 中的 PropertyPlaceholderConfigurer

    我在我的项目中使用 Spring MVC 我在中定义了详细信息web xml像这样

  • 对 mysql 中的结果进行排名（mysql 相当于 oracle 中的“dense_rank()”或“row_number()”函数）

    以下是样本数据 dept id salary 10 10000 10 20000 10 20000 10 30000 20 50000 20 60000 我想对部门 ID 进行分组 然后按升序生成工资的排名值 输出应如下所示 dept id

  • 如何获得 Rails 路线以将扩展保留为 id 的一部分？

    我定义了以下路线 map resources images only gt index new destroy 当我做一个rake routes我得到以下信息 image DELETE images id format action gt

  • ServiceStack.DataAnnotations 缺少属性定义？

    我正在尝试使用 ServiceStack DataAnnotations 中的 ServiceStack 属性装饰器 但是当我在 MSVS 对象浏览器中查看 ServiceStack DataAnnotations 命名空间时 只有以下类型

  • 为所有测试配置一次 jest 超时

    根据文档 可以使用以下命令将默认异步超时从 5000ms 增加玩笑对象 https jestjs io docs en jest object 更具体地说 通过使用玩笑 settimeout 超时 https jestjs io docs

  • 如何过滤 django-taggit 顶部标签

    假设您有一个数据库 其中包含在 Django 应用程序后面运行的 User 对象 你想使用django taggit标记用户对象 以便您可以使用一些方便的过滤来检索子组 此外 您还有一个仪表板 您希望在其中显示有关已用标签的有趣统计信息 以

  • 防止 fork() 复制套接字

    我有以下情况 伪代码 function f pid fork if pid 0 exec to another long running executable no communication needed to that process

  • C# 逐字字符串换行符：CRLF、CR 或 LF？

    我今天遇到了一个有趣的问题 我的测试在构建机器上始终失败 而即使使用相同的配置 它们在我的机器上运行得很好 当我查看故障转储中 Assert AreEqual 输出的差异时 我看不到任何不同 经过一系列调查后 我发现测试用例源代码中的逐字字

  • Common Lisp 中的 LET 与 LET*

    我理解 LET 和 LET 并行绑定与顺序绑定 之间的区别 并且作为理论上的问题 它非常有意义 但有没有什么情况你曾经真正需要过 LET 在我最近查看的所有 Lisp 代码中 您可以将每个 LET 替换为 LET 而无需进行任何更改 编辑

  • 酒吧升级降级了我的主包

    这是我的依赖项列表 dependencies browser any polymer any polymer elements any angular any lawndart any validate any http utils any

  • 如何使用c#在现有的word文档中插入图像

    我正在与word and c 使用我的代码拍摄快照并将其保存在特定文件夹中 例如 C Temp 现在我想将图像保存到现有的 Word 文档中 非常感谢任何有关简短代码示例的帮助 会更喜欢使用Microsoft Office Interop

  • 如何在给定的文本片段中找到匹配括号或大括号的位置？

    许多文本编辑器和 IDE 都有一项功能 当光标放置在其中一对中的开始或结束字符上时 会突出显示匹配的括号 方括号或大括号 给定文本文件中左括号或右括号的位置 使用什么算法来查找匹配括号的位置 请记住 这些字符可以嵌套 因此只需向前或向后扫描

  • 关于创建包含按钮的图库视图的问题？

    我创建了一个包含按钮的图库 示例代码如下 public class Adapter extends BaseAdapter private Context mContext public ImageAdapter Context c mCo

  • 如何在 Bootstrap 下拉悬停上添加延迟

    我正在尝试为引导下拉菜单添加延迟 我已经添加了 css 以使下拉列表在悬停时显示 你可以在这里测试一下http www bootply com YcVBzvXqrR http www bootply com YcVBzvXqrR 这是我的

  • 如何在ios中写入json文件

    这里我正在读取和写入一个 json 文件 读取正确 但当我写入文件时 它不会在 json 文件中写入数据 这是我的代码 reading Json file NSString filePath NSBundle mainBundle path

  • apache mysql - 3306 上的“数据包乱序”

    我刚刚全新安装了 Apache 服务器 2 2 一切正常 当我访问本地主机时 我得到 它有效 我刚刚安装了 mySQL5 5 当我访问 localhost 3306 时 我只是得到乱码 J 5 5 22 4 LM D p 6 I 4 9z

  • 对象适配是否会破坏 Chrome 中的某些图像长宽比？

    I m using object fit cover on some IMG tags within a wrapper div to try to fill a div with the image I ve noticed that s

热门标签