在前端开发中，我们常常会遇到一些图片需要进行剪裁或者缩放的情况，但是 CSS 中的 object-fit 属性是在某些老旧浏览器中不被支持的，而在实现图片缩放的过程中，object-fit 又是一个非常重要的属性，因此今天我们要介绍的就是通过 npm 安装的 object-fit 包的使用教程。
什么是 object-fit？
object-fit 是 CSS3 新引入的一个属性，用于指定元素内被替换的内容（比如 img 标签或者 video 标签）应该如何适应到元素自身的大小尺寸。它有以下几个属性值：
- fill：默认值，填充元素的整个内容区域，可能造成图片变形；
- contain：将整个内容适应到元素内部，保持原图比例；
- cover：将内容的宽度和高度适应到元素内部，保持内容比例；
- none：不对内容做任何缩放；
- scale-down：提供 none 或 contain 的优化版本，以便当内容比容器小的时候选择其中一个值。
安装包
在使用 object-fit 属性之前，我们需要先安装 object-fit 包，并配置打包工具加载。
npm install --save object-fit-images
使用方法
在你的 JavaScript 文件中导入 object-fit-images 包，并使用它的 polyfill 方法。
import objectFitImages from 'object-fit-images'; objectFitImages();
示例代码
下面是一个基本示例，展示如何使用 object-fit 包来设置图片的样式。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----------------- ---------- ------- ---------- - ------ ------ ------- ------ --------- ------- - --- - ------ ----- ------- ----- ----------- ------ - -------- ------- ------ ---- ---------------------- --- ---- ------------------ ---- ------------ --- ---- ----------------------------------- ------ -- ------ ------- ---------------------- ------- -------展开代码
总结
通过使用 object-fit-images 包，我们可以轻松地在老旧浏览器上实现图片的缩放适配，并且能够更好地适应不同尺寸的容器。希望这篇文章能够对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f746535a9b7065299ccbc77
