图片自适应大小

1. img标签 - - object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

缺点：IE不支持

• contain：保持图片原始的长宽比，调整图片尺寸，使高度或宽度（两者中较长的一个）能够适应给定的尺寸。
• cover：保持图片原始的长宽比，图像区域完全被图片完全覆盖。
  fill：默认值。图片完全填充于图像区域，即使付出会损失原始长宽比的代价。
• none：图片尺寸不会被调整。原始图片大小直接铺在图像区域。
• scale-down：在取值 contain、none 情况下，较小的那个。

---

2. background-img - - background-size

用于指定背景图像的大小。

• cover：是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示。（推荐使用）

• contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边。

• 100% 100%：按容器比例撑满，图片变形；