CSS之MP4背景动态缩放 需求项目上要求用一个视频做背景， 给到的文件是一个4k的若干秒视频，webui设计图1080p, 且没有提供个其他分辨率资料， 故根据屏幕分辨率动态缩放<template> <div class="index-root"> <div class="index-video-bg"> <video autoplay muted loop :style="getVideoScale()"> <source src="@/assets/video/bg_4k.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video> </div> </div> </template>.index-root { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100vh; width: 100vw; justify-content: center; .index-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; } } }computed: { getVideoScale() { return () => { if (this.videoScale && this.videoScale > 0) { return 'transform: translate(-50%, -50%) scale(' + this.videoScale + ');'; } return ''; }; }, }, mounted() { const screenWidth = window.screen.width; const screenHeight = window.screen.height; let number1 = screenWidth / 3840; let number2 = screenHeight / 2156; if (number1 < 1.0 || number2 < 1.0) { this.videoScale = Math.max(number1, number2); } },大致流程便是如此， 实际使用还需要完善一些其他逻辑！！！