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

Feb 5, 20213 min read

此文最后修改于 1260 天前,可能包含很多不再适用的废话,阅读需谨慎~

需求来源

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

算法实现

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

JS

示例

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

浏览量

最后修改于

Feb 5, 2021
Made withbyXiaojun Zhou