CSS object-fit cover 正在 Mac Chrome 中拉伸特定图像
CSS object-fit cover is stretching a particular image in Chrome on Mac
img {
width: 200px;
height: 150px;
object-fit: cover;
}
<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />
许多其他图像工作正常。
在其他浏览器中，一切也都按预期工作。
可能是什么问题？
Chrome 版本 84.0.4147.89
这是因为图片本身保存不正确或格式不正确。
我在将原始图像下载到我的计算机时注意到这一点，尽管图像尺寸为纵向 (2208 x 2944)，但预览显示为水平。
我在预览中打开它，将其旋转回原来的样子并保存。我把它放在 imgur 上以获取 link 来使用：
img {
width: 200px;
height: 150px;
object-fit: cover;
}
<img src="https://i.imgur.com/8OLakxR.jpg" />
根据@dgknca 的评论编辑进一步解释：
正如@dgknca 指出的那样，background-position: cover 有效是因为在这种情况下图像不是 replaced 元素，而是浏览器获取呈现的图像并使用它作为背景图片
object-fit 适用于 替换元素 ，例如 video, img, iframe and embed（最常见）。
因此，在这种特殊情况下，与实际图像相关联的元数据或其他数据似乎是corrupt/malformed/incorrect。因此，当 Chrome 解释这个 replaced 元素的实际图像数据时，它试图做 object-fit: cover - 到 Chrome 图像是水平的而不是垂直，所以它被拉伸或者更确切地说是不正确地“适合”。
关于替换元素的 MDN 文章 link：
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.
img {
width: 200px;
height: 150px;
object-fit: cover;
}
<img src="https://res.cloudinary.com/wisdo/image/upload/v1589582065/mentored-sessions/New/Kim.jpg" />
许多其他图像工作正常。 在其他浏览器中，一切也都按预期工作。
可能是什么问题？
Chrome 版本 84.0.4147.89
这是因为图片本身保存不正确或格式不正确。
我在将原始图像下载到我的计算机时注意到这一点，尽管图像尺寸为纵向 (2208 x 2944)，但预览显示为水平。
我在预览中打开它，将其旋转回原来的样子并保存。我把它放在 imgur 上以获取 link 来使用：
img {
width: 200px;
height: 150px;
object-fit: cover;
}
<img src="https://i.imgur.com/8OLakxR.jpg" />
根据@dgknca 的评论编辑进一步解释：
正如@dgknca 指出的那样，background-position: cover 有效是因为在这种情况下图像不是 replaced 元素，而是浏览器获取呈现的图像并使用它作为背景图片
object-fit 适用于 替换元素 ，例如 video, img, iframe and embed（最常见）。
因此，在这种特殊情况下，与实际图像相关联的元数据或其他数据似乎是corrupt/malformed/incorrect。因此，当 Chrome 解释这个 replaced 元素的实际图像数据时，它试图做 object-fit: cover - 到 Chrome 图像是水平的而不是垂直，所以它被拉伸或者更确切地说是不正确地“适合”。
关于替换元素的 MDN 文章 link：
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.