CSS object-fit 封面正在拉伸(stretch) Mac 上 Chrome 中的特定图像

Question

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />

Codepen Example
许多其他图像工作正常。
在其他浏览器中，一切都按预期工作。
可能是什么问题？
Chrome 版本 84.0.4147.89

Answer 1

这是因为图像本身保存不正确或格式不正确。
当我将原始图像下载到我的计算机时，我注意到了这一点，尽管图像尺寸为纵向(2208 x 2944)，但预览显示为水平。
我在预览中打开它，将它旋转回原来的样子并保存了它。我把它放在 imgur 上以获取要使用的链接:

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

<img src="https://i.imgur.com/8OLakxR.jpg" />

根据@dgknca 的评论进行编辑以进一步解释:
正如@dgknca 指出的那样， background-position: cover之所以有效，是因为在这种情况下，图像不是替换元素，而是浏览器获取呈现的图像并将其用作背景图像 object-fit适用于替换元素，例如 video, img, iframe and embed (是最常见的)。
因此，在这种特殊情况下，似乎元数据或与 关联的其他数据实物图 已损坏/格式错误/不正确。因此，当 Chrome 解释这个替换元素的实际图像数据时，它试图做 object-fit: cover - 对于 Chrome，图像是水平的而不是垂直的，因此它被拉伸(stretch)或者不正确地“适合”。
MDN 文章中关于替换元素的链接:
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
这是重要的部分:

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.