Vue中图片如何实现裁剪与等比例缩放

Question

公司需要将小程序改写成H5，遇到一个问题就是img图片适应问题。

  原图:
  

  图片在小程序中：
   

  
  显得很自然，用了小程序image组件的mode属性，属性值为aspectFill
  
  

https://developers.weixin.qq....

  
  图片在H5中
 

  很明显被拉伸了并且没有裁剪
   
  求教在VUE中怎么实现这种效果?

Answer 1

.image{
    background-size: cover;
    background-position: center 0;
}

Answer 2

img{object-fit: cover;}

Answer 3

cosnt image = new Image();
image.onload = ()=>{
  // 获取图片宽高比 然后与期望的宽高比做对比 以便判断是优先适配宽度还是高度
  // 然后就是计算溢出偏移，你要是做到和小程序一个效果，应该需要加一层父容器，以便overflow:hidden
};