如何让作为背景的视频适配不同屏幕分辨率实现自适应缩放？

原代码存在几个导致自适应失效的问题：

• 容器的margin与position:absolute组合会破坏适配逻辑，且视频硬编码了min-width:1600px，小屏幕会强制横向拉伸产生滚动条
• background-position对video元素无效，这是给CSS背景图用的属性
• 视频的定位和尺寸约束设置不合理，无法跟随屏幕分辨率调整

修改后的HTML（结构保持不变） #

<div class="wrapper">
    <video autoplay muted loop>
        <source src="resources/promo-vid.mp4" type="video/mp4">
    </video>
</div>

修改后的CSS #

/* 容器设置为全屏范围，确保视频作为背景填充 */
.wrapper {
    position: fixed; /* 固定定位，始终覆盖视口 */
    top: 0;
    left: 0;
    width: 100vw; /* 占满视口宽度 */
    height: 100vh; /* 占满视口高度 */
    z-index: -100; /* 置于页面内容下方 */
    overflow: hidden; /* 隐藏超出容器的视频部分 */
}

.wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心属性：保持视频比例，覆盖容器，自动裁剪超出区域 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 绝对居中，确保视频始终展示核心区域 */
}

关键说明 #

• 用position:fixed替代原有的absolute+margin，避免容器布局偏移，保证背景覆盖视口
• object-fit:cover是自适应核心：保持视频宽高比不变，同时让视频完全填充容器，超出部分自动裁剪，不会出现拉伸变形
• transform: translate(-50%, -50%)配合绝对定位，确保视频在任何屏幕尺寸下都以中心区域为展示重点，不会丢失关键内容
• 如果不需要全屏背景，只需把.wrapper的width和height改成你需要的尺寸（比如保留min-height:500px），其他属性保持不变即可

内容的提问来源于stack exchange，提问作者hannah