在本文中，我们将讨论两个Web开发人员都不了解的CSS属性。它们被调用object-fit，object-position并且都与图像和视频的样式有关。
首先，我们将向您展示如何使用它们，并详细介绍所有重要的规格。之后，我们为您准备了一个小型演示应用程序，您可以在其中试用这些属性并查看它们的运行情况。让我们开始！（文末将附上演示代码）
对象拟合
借助object-fit我们，我们可以解决图像（或视频）如何拉伸或压缩自身以填充其内容框的问题。当我们拥有的照片的尺寸或宽高比与我们在布局中为其指定的位置不同时，这是必需的。
传统上，要解决此问题，可以创建div和并设置background-image和background-size。但是，现代CSS允许我们简单地添加一个image标记，像往常一样设置其来源，然后object-fit直接应用于图像选择器：
img { 宽度：100％ ; 适合对象：封面；}
它收到的可能值为：
填充（默认）-图像的宽度和高度与框的宽度和高度匹配。大多数情况下，这会弄乱纵横比。
封面-图片会保持其长宽比，并填满整个方框，其中一部分会被裁剪，因此不会显示。
包含-图像保持宽高比并放大/缩小以适合框内。
无-原始尺寸和宽高比。
缩小-像上面的一种一样显示，具体取决于哪一种会生成最小尺寸的图像。
对象位置
此属性定义图像将在容器内放置的位置。它采用两个数值，一个用于上下轴，另一个用于左右轴。这些数字可以是百分比，像素或其他度量单位，并且可以是负数。也可以使用一些关键字，例如center，top，right等。
默认情况下，图像位于容器的中心，因此默认值为：
img { object-position：center; / *等于* / 对象位置：50％ 50％ ;}
游乐场演示
阅读CSS属性是一回事，亲自测试它们是另一回事。下面是一个演示页面，这将有助于你找到窍门object-fit，并object-position在任何时间。在其中，您可以测试属性并为它们提供不同的值，以查看它们如何转换媒体对象。不要害怕也打开DevTools。
浏览器支持
下面的所有很酷的CSS功能的传统，浏览器支持的object-fit和object-position相当不一致，在这种情况下，它的IE浏览器和边缘，提供所有的支持。在等待所有Microsoft浏览器采用这两个属性的同时，您可以使用此polyfill很好地解决了该问题。另外，将背景图像设置为所有图像容器始终是一个好主意。
结论
在 object-fit与object-position建筑响应的网页时，性能可以有很大的帮助。它们易于使用和记住，并且可以完美地完成工作。我们确信，一旦IE和Edge采纳它们，它们将迅速成为每个Web开发人员CSS工具箱的一部分。
好了，今天的分享就到这里，如果还有什么疑问或者下载演示代码，可以去前端学习交流裙免费（109029339）下载，里面还有一些其它的学习资料，都可以分享给大家，关注我，学前端，不迷路......
网友评论