物体适配是否会破坏Chrome中的某些图像宽高比? [英] Is object-fit breaking some image aspect ratios in Chrome?

问题描述

我在包装div中的某些IMG标签上使用了object-fit:cover，以尝试用图像填充div.我注意到有些文件的长宽比似乎有所延长，而另一些文件则显示正确.这是专门在Chrome中发生的(我在版本83中观察到).在Edge(和Firefox)上可以正常运行:

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). It works ok on Edge (and Firefox):

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

I suspect this is a rendering bug in Chrome, and it may be triggered by the images having EXIF rotation metadata.

这是一个演示- 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是否有错误，或者这是浏览器错误?

So is there a mistake in the CSS/HTML or is this a browser bug?

推荐答案

这似乎是浏览器错误.我已将其报告给铬错误跟踪器，并且已由另一位测试人员复制.看来它是在Chrome 65之后引入的.

It looks like this is a browser bug. I've reported it to the chromium bug tracker, and it's been reproduced by another tester. It appears it was introduced after Chrome 65.

这篇关于物体适配是否会破坏Chrome中的某些图像宽高比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！