img图片实现背景图片的效果、img平铺、object-fit

最近公司做了一个项目,当时用的img图片标签，做的是一个头像，一想到头像宽高不确定 又要铺满整个相框 还不能变形 和背景图片差不多，自己琢磨着写了半天的js,判断宽高呀啥的，能力不足，未果。。。
看了下菜鸟 看到了object-fit之后 感觉全世界都亮了

不多说了 直接看我写的
关键属性：

    object-fit: fill;
	object-fit: contain;
	object-fit: cover;
	object-fit: none;
	object-fit: scale-down;

这个不仅仅是对img有用，还可以在video里面用

案例：

fill
被替换的内容的大小，以填补该元素的内容框：对象的具体对象的大小是元素的使用宽度和高度。
contain
被替换的内容的大小，为自身宽高比不变，适应该元素的内容框的大小：它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。
cover
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
none
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
scale-down
内容的尺寸仿佛none或contain指定了，取将导致更小的具体对象的大小。