5

我在包装 div 中的一些 IMG 标签上使用 object-fit:cover 来尝试用图像填充 div。我注意到有些文件的纵横比似乎被拉伸了，而另一些文件的显示则正确。这特别发生在 Chrome 中（我在 83 版上观察它）。 Chrome 上的显示问题 它在 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 中的错误还是浏览器错误？

4

1 回答 1

1

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

于 2020-07-14T22:09:14.910 回答