图片不拉伸变形

CSS3 针对图片显示增加了 两样属性

1、object-fit：控制图片展示状态
 fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
   contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白。
    cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。
none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

2、object-position：控制图片展示位置

     object-position: left 100px bottom 100px;