html 中图片怎么居中裁切,前端实现图片和视频的居中裁剪

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`

}

}