背景图片自适应：background-size:cover/contain
图片自适应：object-fit 属性值object-fit:fill/contain/cover/none/scale-down
fill:默认值，填满不保证保持原有比例
contain:保持原有比例，会留白
cover: 保持原有比例，拿中间部分，部分区域不可见
none:保持原有比例，同时保持替换内容原始尺寸大小
scale-down:保持原有尺寸比例，如果容器尺寸大于图片内容尺寸，保持图片原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法和contain一样
-----------------------------------------------------我是分割线----------------------------------------------------------
可以使用的一些示例
1.利用伪元素做的照片展示
2.类似下围棋的小Demo
3.HTML5利用Canvas模拟上下扫描动画实现
4.tab导航向左滑动切换页面
5.弹出框后加蒙版
6.animate动画滑出侧边栏
7.日历签到打卡，转盘抽奖
8.日历插件使用
9.div+css可以实现图片等比例缩放
div style="width:50px;height:40px" div
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width
10.css显示图片中间区域
11.pullDemo 使用mui模版做的下拉刷新功能
12.几种常见的loading