前端实现图片和视频的居中裁剪

1. 图片裁剪效果 -- 用css可实现

方法：就是把图片作为标签的背景色, css控制图片的位置

  {
    height: 100%;
    background-image: url(/*image地址*/);
    background-size: cover;
    background-position: center;
}  

2. 视频裁剪效果 -- 用js可实现

方法：需要获取视频的高度和宽度，然后根据所在区域的比例，设置video的height和width属性值（100%和auto中切换,本例以9/16为例，所在区域宽高分别是：375 * 667

let ele = document.getElementsByTagName('video')
if (ele[0]) {
  let {width = 0, height = 0, left = 0, top = 0} = this.video || {} 
  #this.data 指向视频的信息

  if (width && height && full) {
    if (width / height > 9/16) {
      left = (width * 667 / height - width) / 2
      ele[0].setAttribute('width', 'auto')
      ele[0].style.position = 'absolute'
      ele[0].style.left = `-${left}px`
    } else {
      top = (height * 375 / width - height) /2
      ele[0].setAttribute('height', 'auto')
      ele[0].style.position = 'absolute'
      ele[0].style.top = `-${top}px`
    }
  }