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

Question

我在包装器 div 中的一些 IMG 标签上使用 object-fit:cover 来尝试用图像填充 div。我注意到一些文件的纵横比似乎被拉伸，而其他文件显示正确。这特别发生在 Chrome 中（我在 83 版上观察到它）。 它在 Edge（和 Firefox）上运行正常：

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

这是一个演示 - 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 中存在错误还是浏览器错误？

Answer 1

看起来这是一个浏览器错误。我已将其报告给chromium bug tracker，并且已由另一位测试人员重现。它似乎是在 Chrome 65 之后引入的。