需求来源
object-fit 可以很方便的对 img
标签做拉伸适配,但它一是兼容性不太好,二是只能在可替换元素中使用,如果我们想对一个 div 做类似调整,它就无能为力了,所以这种场景下就需要我们对 object-fit
的各种算法有一定了解才能手动实现。
算法实现
object-fit
一共有 fill
| contain
| cover
| none
| scale-down
五种拉伸方式,以下是针对每种方式的算法实现:
1 | // Cover |
示例
具体示例可以参考 https://codesandbox.io/s/object-fit-gechonglashensuanfa-23uhd