object-fit 和 object-position 的快速概述

object-fit 和 object-position 是我最近最喜欢的两个 CSS 属性。它们让开发人员可以控制 img 或 video 内部的内容，类似于我们可以使用 background-position 和 background-size 来操作 background 的内容。

首先，让我们深入了解 object-fit。

此属性定义了元素（例如 img）如何响应其内容框的宽度和高度。使用 object-fit，我们可以告诉内容以各种方式填充该框，例如“保持该纵横比！”或“拉伸并尽可能多地占用空间！”

以下是一个示例

此图像为 400px x 260px。如果我们像这样设置该图像的样式…

img {  
  width: 200px;
  height: 300px;
}

…那么最终会导致奇怪的扭曲，因为该图像被压缩以适合该容器

查看 CodePen 上 Robin Rendle (@robinrendle) 制作的 1b15cf30a6226d9f419b4f765458a059。

我们的 img 的内容将占用我们更改其高度和宽度时创建的新框内的所有可用空间，从而破坏其原始纵横比。

为了在填充空间的同时保留图像的纵横比，我们可以使用 object-fit

.cover {
  object-fit: cover;
}

查看 CodePen 上 Robin Rendle (@robinrendle) 制作的 7080df9cb7158c0860b8a66db9667a7d。

左侧的图像是我们原始的图像，右侧的图像剪掉了图像的侧面，现在保留了我们的纵横比！在该尺度上，这可能看起来不像一个特别有趣的进展，但一旦我们开始设计更逼真的界面，object-fit 的强大功能就会显现出来。

让我们看另一个例子

查看 CodePen 上 CSS-Tricks (@css-tricks) 制作的 WrBzey。

这里我们有两个图像，我们希望它们填充浏览器窗口宽度的一半（这样它们并排放置）和高度的 100%。我们可以借助视口单位来实现这一点

img {
  height: 100vh;
  width: 50vw;
}

问题是，当我们调整浏览器大小，我们也会改变图像的纵横比，这会导致各种奇怪的问题。相反，我们希望像在前面的演示中一样保留它们的纵横比，我们可以使用完全相同的方法来实现这一点。object-fit: cover 来拯救！

查看 CodePen 上 CSS-Tricks (@css-tricks) 制作的 YwbeoG。

再次尝试调整浏览器大小。没有纵横比怪异之处，对吧？如果我们有尺寸不同的图像，这也有非凡的帮助，因为它们实际上会被其边界框裁剪。

cover 只是 object-fit 的许多值之一，您可以在 年鉴条目 上了解有关更多值的详细信息，但到目前为止，这是我在日常界面开发中发现最实用的值。

让我们继续我最喜欢的东西：object-position。

我们将通过使用与之前相同的图像并使用这些样式来进行设置

img {  
  background: yellow;
  height: 180px;
  object-fit: none;
}

这里需要注意两点：我们需要声明图像的尺寸，以便 object-position 正确工作，并且我们还需要将 object-fit 设置为 none，这样图像就可以被推来推去，而不是像默认情况下那样填充整个框。当您看到 img 上 object-fit 的默认值为 fill 时，即使您没有声明它，这一点就更有意义了。

说到默认值，object-position 在没有值的情况下水平和垂直居中所有对象

img {
  background: yellow;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%; /* even if we dont declare this the image will still be centered */
}

第一个值将图像向左或向右移动，第二个值将图像向上或向下移动。我们可以在这里试验这些值

查看 CodePen 上 Robin Rendle (@robinrendle) 制作的 Object position。

我们甚至可以将图像推入其内容框内，这样我们就可以看到我们之前设置的 background-color。

但这有什么用？好问题！好吧，在最近的一个项目中，我发现图像的特定部分需要移到中心，以便吸引读者的注意力。我们不需要加载新图像，因此在这种情况下不需要 <picture> 元素，我们只需要将图像稍微移动一下。

除了移动图像的焦点，我不确定此属性在实际意义上还有什么其他用途。但我一直在使用 object-position 来展示如何隐藏图像的某些部分，然后在单击时显示这些部分，就像在这个演示中一样

查看 CodePen 上 Robin Rendle (@robinrendle) 制作的 SVG sprite with object-position。

我还没有尝试过如何或为什么你可能将它用于 <video> 元素。也许是覆盖所有边缘的全屏视频？在这些属性方面，还有很多东西要学习和探索。

支持情况如何？

总的来说，非常好！

object-fit 除了 IE/Edge 之外，所有浏览器都支持。而 object-position 除了 Safari 和 IE/Edge 之外，所有浏览器都支持。