注意：不推荐/不起作用

请注意，由于Microsoft Edge不支持获取匹配CSS规则的好方法，并且还有其他一些可能无法解决的问题，因此该polyfill对于大多数项目都是有限的，因为所有其他浏览器供应商都支持object-fit现在是本地人。

Edge支持的替代方案

object-fit-images并fitie可以代替此polyfill使用。

Web标准
的规范object-fit可在W3C CSS3 Images中找到。该属性缩放图像以某种方式适合定义的区域，例如：

img {
width: 100%; // dimensions are mandatory
height: 35em; // dimensions are mandatory

  1. object-fit: cover;
  2. overflow: hidden; // Cuts off the parts of the image poking out

}
通常，图像会被拉伸到指定的尺寸，但是由于CSS属性的使用，object-fit: cover;图像现在会按比例缩放，直到定义区域的每个像素都被部分覆盖。在覆盖的情况下，这意味着图像的一部分将与给定区域重叠。

以下是可能的值及其含义：

fill将图像精确拉伸至定义的尺寸，这会导致图像变形。可比的background-size: 100% 100%。这是默认值。
none使图像保持其自然大小，并在定义的区域内居中。如果图像的自然尺寸大于定义的区域，除非您也进行设置overflow: hidden，否则图像的某些部分会从其中戳出。可比的background-size: auto auto; background-position: center center。
contain放大或缩小图像，直到所有图像都适合定义的区域。此模式遵循图像的自然长宽比。也称为“信箱视图”。可比的background-size: contain。
cover放大或缩小图像，直到定义区域的每个像素都被图像的一部分覆盖。排序为“平移和扫描视图”。这意味着除非您也对其进行设置overflow: hidden，否则图像的某些部分将戳出定义的区域。此模式遵循图像的自然长宽比。可比的background-size: cover。
适合对象的工作原理

特征检测
polyfill使用特征检测方法来查看是否支持对象拟合。如果不是，它将自动激活。

浏览器支持
该polyfill可在所有主要浏览器以及IE9 +中使用。找出哪些浏览器object-fit本身支持。

浏览器 polyfill？ 本机？
谷歌浏览器 是 v31 +
歌剧 是 v24 +
火狐浏览器 4+（＃13） v36 +
IE浏览器 9+ “在考虑中”
设置/用法
该polyfill可作为Bower组件或通过npm获得。立即使用它，远离凉亭：

$ bower install —save object-fit
或通过npm设置

$ npm install —save object-fit
该—save标志用于将包依赖项存储在package.json中，以便下次使用可以自动获取它npm install。用于—save-dev仅将其用作开发依赖项（但仅在您确定知道自己要做什么时才使用）。

或通过从GitHub抓取下载进行手动设置。然后，将CSS文件包含polyfill.object-fit.css在HTML中，将JavaScript文件包含polyfill.object-fit.min.js在HTML底部。在JavaScript文件参考的后面，您现在需要调用polyfill：
您可以在我们的测试目录中找到示例实现。

测试中
由于CSP的限制和我们的CSS解析器，无法从文件系统测试此polyfill。您需要设置一个从根目录提供服务的本地服务器。呼叫http://localhost:8000/tests/index-cover.html应该可以正常工作了。php -S localhost:8000例如，将在当前目录中启动本地PHP服务器。

DOM监视功能
在更大的IE8浏览器中，polyfill使用DOM突变事件或突变观察者（取决于可用的变量）来检测是否有更多与定义的选择器匹配的图像注入。这意味着它将在以后任何时候将其自身应用于添加到DOM的任何图像。它将与您从DOM中删除的图像分离。由于此功能的制作过程非常复杂，因此您可能要注意意外的行为。

安全性/混合内容问题和第三方CSS
如果您在网站上使用任何第三方CSS或混合内容（来自服务，CDN或类似内容的Webfonts），则polyfill可能无法正常工作。您仍然可以使用polyfill，但随后需要设置一些有关CSP的选项：

例如，您需要将标题设置为：

‘Access-Control-Allow-Origin: ‘
这应该解决问题。如果您还需要支持凭据，则不能使用，但需要服务器带有两个标头的答复（服务器也需要标有的答复Access-Control-Allow-Credentials: true），其中之一包含所涉及的来源。

建议将属性添加crossorigin=””到link从外部资源调用的CSS 元素中，以指示服务器应使用哪种类型的CORS。

如果您无法更改相关服务器的CSP / CORS设置，则可以在调用的配置中禁用解析外部CSS文件的功能：