图片铺满div后，超出部分隐藏，只展示中心部分

一固定宽高div，中间有一图片，现让png图片铺满div

解决方案一：

图片等比例放大，超出部分隐藏，只截取中间部分

弊端：图片周围会被截断、图片放大会失真（和图片分辨率有关）

<div class="box-image">              
    <img class="img-style"
         src="~@/assets/img/picture.png" 
     /> 
</div>

.box-image {
   width: 1200px;
   height: 488px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   border-radius: 8px;

  .img-style {
      width: 100%;
      height: auto
  }
}

！还未找到让图片不失真铺满div的方法。。。找到后再补充