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

Question

我在包装 div 中的一些 IMG 标签上使用 object-fit:cover 来尝试用图像填充 div。我注意到有些文件的纵横比似乎被拉伸(stretch)了，而另一些文件的显示则正确。这特别发生在 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 之后引入的。