响应式设计中HTML背景视频过度缩放问题求助

你当前设置视频width:100%、height:100%会导致视频拉伸或过度放大，核心原因是没有考虑视频本身的宽高比。可以通过CSS的object-fit属性结合正确的全屏定位来解决这个问题，具体方案如下：

1. 基础布局重置 #

先确保页面根元素没有默认边距，且高度占满视口：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免页面出现滚动条 */
}

2. 视频背景样式调整 #

给视频设置固定定位，结合object-fit控制缩放行为：

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 两种可选方案，根据需求选择 */
  object-fit: cover; /* 保持视频比例，覆盖全屏，超出部分裁剪（无黑边） */
  /* object-fit: contain; 保持视频完整显示，可能留黑边（内容不裁剪） */
  z-index: -1; /* 将视频置于内容下方 */
}

3. 确保前景内容可见 #

给倒计时、链接等前景元素设置层级，保证在视频上方显示：

.countdown, .links {
  position: relative;
  z-index: 1;
  /* 可选：根据视频色调调整文字颜色，提升可读性 */
  color: #fff;
}

这样设置后，视频会自适应不同设备的屏幕尺寸，保持原有宽高比，不会出现过度放大或内容显示不全的问题，同时前景内容能正常展示。

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