img在容器中居中剪裁展示的三种方法

.bigImgWrapper {
  position: relative;
  height: 100%;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;

  .bigImgCover {
    height: 100%;
  }
}

2. 使用元素的background属性

 .imgBox {
   
            background-image: url(http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);//设置背景图片
            background-repeat: no-repeat;//背景图像将仅显示一次。
            background-attachment: scroll;//
            background-position: -50px 0px;//设置背景图片的的偏移量，这个-50相当于背景整体向左偏移50，就可以显示图片的中心
            background-size: 300px 200px;设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
            background-color: transparent;//
            width: 200px;//
            height: 200px;//
        }

3. 在div中包含img，用div的overflow: hidden;来控制，用起来比较灵活，

<div style