object-fit & IE
2019-11-21 本文已影响0人
merrylmr
object-fit理解
- 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');
}
