Html 在Chrome中，object fit是否打破了某些图像纵横比？

我正在使用objectfit:cover在包装div中的一些IMG标记上尝试用图像填充div。我注意到一些文件的纵横比似乎被拉伸了，而另一些文件则被正确显示。这在Chrome中特别发生（我在83版上观察到）。 它在Edge（和Firefox）上正常工作：

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

这是一个示范-

断开的图像：

有效的图像：

---

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

看起来这是一个浏览器错误。我已经把它报告给了测试人员，另一个测试人员也复制了它。它似乎是在Chrome 65之后推出的。

我们在Chrome中也看到了同样的问题，但在Safari或Firefox中没有看到。我们的问题也是由于图像的EXIF数据指定它需要旋转，并且旋转后图像的纵横比没有保持。看起来这个错误仍然没有修复。我们仍然可以复制它。Chrome88。bug追踪者目前注意到修复程序在Chrome89中。

<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>