css图片不变形处理--2种方法

当UI出好图时，图片的格式都是有一定比例。但是你不知道的是从后台拉取的图片到底是什么比例的。
如果给图片写死宽高的话，就会出现图片变形的问题。这个时候产品就会找你说话了。。。

目前的处理有两种方式

１，通过背景图的方式处理。通过background-size作用在容器上
<div class="img_background" style="background-image: url('2.jpg');"></div>

.img_background{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      background:url('default.jpg') no-repeat center;
      background-size: cover;
}

2，对图片使用使用object-fit:cover(推荐使用)
<div class="img_fit">
    <img src="2.jpg"/>
</div>

.img_fit{
      width: 300px;
      height: 200px;
      border: 1px solid red;     
}

.img_fit img{
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
}