如何实现背景GIF随浏览器窗口大小自适应缩放

问题根源 #

你当前的GIF采用相对定位，仅设置了宽度100%，高度会保持原始比例自适应，同时未绑定视口尺寸，窗口缩放时无法同步适配。你可以通过修改样式实现GIF自适应铺满背景的效果，调整步骤如下：

样式调整代码 #

首先修改.background-gif的样式，同时给根元素补充高度属性即可，模板代码无需改动：

/* 补充根元素高度设置 */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%; /* 新增这行 */
}

.header {
  z-index: 3;
  width: 100%;
  height: 65px;
  position: fixed;
  display: flex;
  justify-content: right;
  p {
    cursor: pointer;
    font-family: "Work Sans",sans-serif;
    font-weight: lighter;
    color: white;
    font-size: 1.5rem;
    padding: 20px;
  }
  p:hover {
    color: green;
    transition: .2s
  }
}
.home-content {
  z-index: 4;
  top: 50%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  height: 45%;
  display: flex;
  background-color: rgb(68, 68, 68);
  border-radius: 25px;
}
/* 仅修改.background-gif的样式内容 */
.background-gif {
  position: fixed; /* 改为固定定位，绑定视口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比例缩放铺满容器，不会变形 */
  z-index: 1; /* 放在阴影层下方 */
}
.shadow {
  z-index: 2;
  background: #000000;
  width: 100%;
  padding-top: 65px;
  height: 100%;
  margin: 0 auto;
  opacity: 0.5;
  filter: alpha(Opacity=70);
  position: fixed;
}

补充说明 #

如果不希望GIF被裁剪，可将object-fit属性值改为contain，会保持完整GIF显示，窗口比例不匹配时会出现上下/左右留白。调整后z-index层级顺序为：GIF背景(1) → 阴影层(2) → 头部导航(3) → 内容区(4)，符合你原有层级逻辑。

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