在前端开发中，我们经常会遇到需要调整图片尺寸和位置的情况。使用 CSS 属性 object-fit 可以实现这一功能，但是该属性不支持所有浏览器，特别是 Internet Explorer 和 Microsoft Edge 早期版本不支持。
为了解决这个问题，可以使用 npm 包 object-fit-images。本篇文章将介绍如何安装和使用该包，并提供示例代码帮助读者更好地理解。
安装
首先，我们需要在项目中安装 object-fit-images。可以使用 npm 命令行工具执行以下命令：
npm install --save object-fit-images
通过上述命令，我们已将该包保存在项目依赖中。
使用
接下来，我们需要引入 object-fit-images 并对需要调整尺寸和位置的图片进行设置。
引入 object-fit-images
在 HTML 文件中，我们需要引入 object-fit-images 的 JavaScript 文件：
<script src="node_modules/object-fit-images/dist/ofi.min.js"></script>
注意：如果你的项目使用了 Webpack 或其他打包工具，可以将上述脚本文件导入到项目中，而无需手动引入该文件。
对图片设置 object-fit 属性
在 CSS 样式表中，我们可以使用 object-fit 属性设置图片的尺寸和位置。例如：
img {
width: 100%;
height: 200px;
object-fit: cover;
}然而，为了使该属性在不支持的浏览器上起作用，我们需要将代码添加到 JavaScript 文件中：
objectFitImages();
这个函数会自动检测需要设置 object-fit 属性的图片，如果浏览器不支持该属性，则使用 JavaScript 代码模拟。
示例代码
下面是一个完整的示例代码，包含 HTML、CSS 和 JavaScript 部分：
-- -------------------- ---- -------
--------- -----
------
------
--------- -------------------------
-------
--- -
------ -----
------- ------
----------- ------
-
--------
-------
------
---- ----------------------------------- -----------
------- --------------------------------------------------------------
--------
------------------ -- -------- ---------- --
---------
-------
-------总结
使用 npm 包 object-fit-images 可以解决部分浏览器不支持 CSS object-fit 属性的问题。在项目中安装和使用该包非常简单，只需按照本篇文章所述的步骤执行即可。
希望读者通过本文的学习和实践，可以更好地理解如何使用 object-fit-images，并在前端开发中更加轻松地处理图片尺寸和位置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35200