css images without distortion processing

When a good UI design, picture formats have a certain proportion. But you do not know is pulled back from the picture in the end is what proportion.
If you write to the picture width and height of the dead, then there will be problems image distortion

Currently, there are two ways of handling
1, by way of background processing. On the container by the effect of background-size

<div class="img_background"></div>
.img_background{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      background-image: url('2.jpeg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
}

2, the picture that use object-fit: cover (recommended)

<div class="img_fit">
    <img src="2.jpeg"/>
</div>
.img_fit{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

object-fit, particularly five values:

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

Specific meaning of each attribute value as follows (their understanding of the vernacular, the official interpretation see official website):

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

Two ways to achieve and effect, and in fact the principle is the same. By scaling is, after covering the entire size. Centered.
Because if you want pictures without distortion, it is certainly to zoom.