图片依赖父容器等比适配不变形

在开发的时候，常常会遇到要基于父容器进行图片展示，父容器的宽高是固定的，需要将图片放进去，还需要保证图片等比缩放，不变形。下面有一些自带的css属性可以很好的解决这个问题

1. fill: 默认值，元素内容完全填充元素框，内容可能会被拉伸或压缩以适应框。
2. contain: 将内容缩放以适应框，保持其宽高比。整个内容将会显示在框内，可能会留有空白。
3. cover: 将内容等比例缩放以填充框，保持其宽高比。内容可能会被裁剪以适应框。
4. none: 内容将保持其原始尺寸，不会被缩放或拉伸，同时会覆盖元素框。
5. scale-down: 在none和contain之间取最合适的拉伸比例。如果替换内容尺寸小于contain，则裁剪。否则，行为和contain一样。

img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 图片将填充整个框，可能会失真 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 图片将等比例缩放以适应框，可能会有留白 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片将等比例缩放并填充整个框，可能会裁剪内容 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: none; /* 图片将以原始尺寸展示，并可能会覆盖框 */
}

插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。

https://www.npmjs.com/package/enlarge-file-upload?activeTab=versions

下载命令：npm i enlarge-file-upload