object-fit、background-size属性了解

1.object-fit

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。会出现拉伸
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

小程序image的mode原理

mode:aspectFit;基于object-fit:contain;

mode:asepectFill；基于object-fit:cover;

2.background-size: length|percentage|cover|contain

文档：https://www.runoob.com/cssref/css3-pr-background-size.html

使用🌰

length使用时：第一个值是宽度、第二个值是高度

background-size:100px auto;

background-size:100px 100px;

background-size:cover;

background-size:cotainer;

cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。占满背景区域，图片展示部分

cotainer:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 图片按比例全部展示在背景区域