除了对图片、视频或其他出现在网页上的内容进行样式设计外，在设计网站结构时，将这些内容指定为合适的位置也是非常关键的。在CSS中提供了一些属性，可以让你非常容易地执行这些任务，而且只需一行代码。我们在下面列出了这些属性。
让我们深入了解一下这些属性。
对象匹配属性
为了指定出现在网页上的视频或图像将如何调整其容器的大小，使用了对象适合属性。这个属性基本上描述了当容纳它的容器的大小发生变化时，一个元素将如何行动。
语法
object-fit: none | fill | cover | contain | scale-down | initial | inherit;
所有这些参数在下表中都有解释。
| 参数 | 说明 |
|---|---|
| 无 | 这个值不会调整内容的大小。 |
| 填充 | 这是一个默认值，将通过拉伸或挤压使内容充满其容器。 |
| 覆盖 | 该值用于使内容填满其容器，同时保留其长宽比。 |
| 包含 | 它也用于使内容在保持其长宽比的情况下通过剪切来填充其容器。 |
| 缩小 | 这个值要么继承none值的属性，要么包含一个值。 |
| 初始化 | 此值将属性设置为其默认值。 |
| 继承 | 它从其前身元素中继承该属性。 |
让我们在例子的帮助下进一步探索对象适合的属性。
例子
为了更好地理解object-fit属性的各种值，让我们首先用HTML在我们的网页上嵌入一个图像。
HTML
<img src="ball.jpg" alt="Ball">
这里我们在标签的src属性中添加了一张图片。
输出
一张图片已经被嵌入到网页中。
现在让我们来探讨一下对象拟合属性的不同参数，看看这些参数对上面的图片有什么作用。
填充
在这里，我们设置了图像的一些宽度和高度，object-fit属性提供了填充值，这将使图像通过挤压或拉伸适合其容器。
img {
width: 200px;
height: 300px;
object-fit: fill;
}
输出
图像已被挤压以填充其容器。
覆盖
object-fit属性的cover值将切割图像的边，并将其放入容器内，保持其长宽比。
img {
width: 200px;
height: 300px;
object-fit: cover;
}
输出
覆盖参数工作正常。
包含
除了给图像提供一些宽度和高度外，我们还将object-fit属性设置为contain，这将在保持图像长宽比的同时将其夹在容器中。
img {
width: 200px;
height: 300px;
object-fit: contain;
border: 5px solid blue;
}
输出
图像已被成功裁剪。
缩减
object-fit属性的scale-down参数继承了cover参数或contain参数的属性。
img {
width: 200px;
height: 300px;
object-fit: scale-down;
border: 5px solid blue;
}
输出
缩减值工作正常。
对象-位置属性
为了指定一个元素（尤其是图像或视频）在其容器内应如何沿水平或垂直维度定位，对象位置属性被使用。这个属性总是和object-fit属性一起使用。
语法
object-position: position | initial | inherit;
位置参数描述了图像或视频沿x和y轴的位置。它可以是一个字符串，如左、右、中心，或一个像素或百分比的数字。
为了更好地理解，这里有一个对象-位置属性的例子。我们考虑上述例子中使用的图像。为了定义它的位置以及如何调整它的大小以适应其容器，请使用以下代码片段。
CSS
img {
width: 200px;
height: 300px;
object-fit: contain;
object-position: 1% 90%;
border: 5px solid blue;
}
在上面的代码中，我们将object-fit属性设置为contain，这意味着图像将在容器内被剪切，同时保持其长宽比。同时，图像的顶部和左侧位置已被分配为1%，而底部和右侧位置已被分配为90%。最后，容器的边框被赋予5px的纯蓝颜色。
输出
对象位置属性已经成功实现。
总结
CSS提供了object-fit和object-position属性，帮助设置图像的尺寸。object-fit属性描述了如何调整视频或图像的大小以适应其容器，同时，object-position属性定义了一个元素（尤其是图像或视频）应该如何在其容器内沿水平或垂直方向定位。这两个属性以及它们所能呈现的各种值都在这篇文章中通过例子进行了演示。
