记录一下 object-fit 各种拉伸算法

Last Updated: February 5, 2021 · 3 min read

需求来源

object-fit 可以很方便的对 img 标签做拉伸适配,但它一是兼容性不太好,二是只能在可替换元素中使用,如果我们想对一个 div 做类似调整,它就无能为力了,所以这种场景下就需要我们对 object-fit 的各种算法有一定了解才能手动实现。

算法实现

object-fit 一共有 fill | contain | cover | none | scale-down 五种拉伸方式,以下是针对每种方式的算法实现:

js

示例

具体示例可以参考 https://codesandbox.io/s/object-fit-gechonglashensuanfa-23uhd


©2022xiaojun1994
 0   0