object-fit & IE

object-fit理解

CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

• fill:将内容拉伸填满整个 content box,不保持原始比列；
• contain：内容在填充content box 同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,容器内留下空白；
• cover：保持原有比例，如果对象的宽高比与content box不相匹配，该对象将被剪裁以适应内容框。
• scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些；
• none：被替换的内容将保持其原有的尺寸

image.png

浏览器兼容性

image.png

从上图可以看出：IE浏览器不兼容object-fit;

兼容IE浏览器

调研了目前object-fit的兼容，大致有如下两种实现方案：
1.使用background-image+background-size:cover组合实现
参考插件：object-fit-images

2.通过原图片的宽高比与图文本身DOM的宽高比计算，然后添加相应的类

参考插件：object-fit

More

在项目中，图片大多数要求是需要懒加载的。注意在使用以上object-fit插件时，需要等待图片真正加载出来，才能去执行对应插件的方法。

如果你使用的懒加载插件是lazysizes,那么这里就非常简单啦，该插件自带了扩展插件 object-fit polyfill extension

就无需去处理等待懒加载插件，加载了图片，再去处理object-fit。
此插件为我们一并解决问题。

// never try to import *.min.js files 
import lazySizes from 'lazysizes';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';

// polyfills
import 'lazysizes/plugins/respimg/ls.respimg';

if (!('object-fit' in document.createElement('a').style)) {
    require('lazysizes/plugins/object-fit/ls.object-fit');
}

参考文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

• https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/