在前端开发过程中，经常会遇到图片和视频的适应问题，比如图片裁剪、缩放、居中等操作，这时候 object-fit 和 object-position 就成了常用的解决方案。而 object-fitter 是一个 npm 包，可以帮助我们更加方便的使用 object-fit 和 object-position 属性，并且支持多种样式。
安装 object-fitter
安装 object-fitter 可以使用 npm 命令进行安装，具体命令如下：
--- ------- ------------- ------
object-fitter 的使用
object-fitter 主要有两个属性：fit 和 position。其中 fit 属性可以应用于 img 和 video 标签，而 position 属性只能应用于 img 标签。
fit 属性
fit 属性可以设置图片或视频在容器中的自适应方式，有以下几种取值：
contain：保持纵横比缩放图片或视频，直到它适合容器的尺寸，通过在容器内垂直或水平居中来设置空白。cover：在保持纵横比的同时，将对象大小调整为填充其使用的容器的整个区域，对其进行集中对齐。fill：不保持纵横比，将对象的大小调整为填充其使用的容器的整个区域。none：不对图片或视频进行任何调整。
示例代码如下：
---- -- ------- ---- --- ---- --------------- ----------- ----------------- --------- ---- -- ----- ---- --- ------ --------------- -------- ----------------- ---------------
position 属性
position 属性用于设置图像在容器中的位置，支持以下取值：
center：在容器中水平和垂直居中。top：在容器顶部水平居中。bottom：在容器底部水平居中。left：在容器左侧垂直居中。right：在容器右侧垂直居中。top-left：在容器左上角。top-right：在容器右上角。bottom-left：在容器左下角。bottom-right：在容器右下角。custom value：自定义 XY 坐标。
示例代码如下：
---- ----------- --- ---- --------------- ----------- ---------------------- -------------
多样式选择
object-fitter 还为我们提供了多样式选择，包括：cover-all、fill-all、center-all、contain-all 等。
cover-all：覆盖整个屏幕并按比例缩放。fill-all：铺满整个屏幕并按比例缩放。center-all：在屏幕中央水平和垂直居中。contain-all：在屏幕中间按比例缩放。
示例代码如下：
---- -- --------- --- ---- --------------- ----------- ------------------
综合示例
下面我们综合使用 object-fitter 进行一个图片的居中裁剪和一个视频的铺满全屏播放。
---- -------- --- ---- ------------------------ ---- --------------- ----------- ----------------- ------- --------------- -------- ------ ---- -------- --- ---- ------------------------ ------ --------------- -------- ----------------- ------------------ ------
CSS 代码如下：
-- ------ -- ---------------- - ------ ------ ------- ------ --------- --------- --------- ------- - -- ------ -- ------------------- - ----------- -------- - ----------------------- - ---------------- ------- - -- ------ -- ---------------- - ------ ------ ------- ------ --------- --------- --------- ------- - -------------------- - ----------- ------ -
结论
通过使用 object-fitter，我们可以更加方便地使用 object-fit 和 object-position 属性，并且还支持多样式选择，同时也提高了我们的开发效率。建议大家多使用npm包来辅助前端开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f963d1de16d83a66d23