object-fit和object-position实现图片原比例裁剪不拉伸适应

fill - 填充，内容拉伸充满整个屏幕

contain - 包含，保持原有比例，保证容器内放的下但是会有留白

cover - 覆盖，保持原有比例，保证内容一定大于容器尺寸，宽高至少有一个和窗口保持一致，部分区域可能不可见

none - 无，保持原有比例同时保持内容原始尺寸

scale-down - 降低，依次设置none或contain，最终呈现尺寸较小的那个

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021070617223278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,