css--实现img图片填充，剪裁效果

业务背景

实现一个轮播图，轮播区域宽度自适应，高度100px; 图片分辨率由用户上传获得。为了让图片不变形，需要对图片进行居中裁剪。

实现

使用css的属性 object-fit： cover

原理

css可替换元素

展示效果不是由css决定，是一种外部对象， 它们外观的渲染独立于css
css不会影响到其中内容的展示，只能改变它的位置，和内容在框里的位置或者定位方式。
例如

object-fit 控制内容在框中的填充方式

类似于background-size；
由以下的一个单独关键字来指定

属性值	效果
none	保持原有尺寸,不会进行缩放
contain	按比例缩放图片，刚好在容器盒子里完全展示｜
cover	宽高按比例缩放，超出容器的部分居中裁剪
fill	平铺满容器，宽高会被拉伸
scale-down	取none和contain中生成的对象尺寸小的那个

object-position控制内容在框中的位置

取1-4个值来决定内容在框中的水平和垂直位置

position = 水平 + 垂直(偏移量)
水平方向的可取值： [left | center | right] + [length | percentage]
垂直方向的可取值：[top | center | bottom] + [length | percentage]