文章区块视频背景适配异常求助：小屏仅显示1/3区域

嘿，我来帮你搞定这个视频背景在小屏幕上只显示1/3的问题！结合你的HTML结构，我整理了几个关键的解决方向：

• 优先设置object-fit属性：这是背景视频适配的核心！你的视频元素#videoBack大概率没配置这个属性，导致小屏幕上视频只会按原始比例显示，没法铺满容器。给它加上object-fit: cover;，这个属性会让视频保持原有宽高比，同时填满整个容器空间，既不会拉伸变形，也不会只显示局部区域。

• 确保容器与article的尺寸完全适配：

  • 给.fullscreen-bag容器设置绝对定位，让它完全覆盖父级article.myArticle：position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  • 检查article.myArticle的高度，小屏幕上如果article仅靠内容撑高度，很可能高度不足，视频自然只能显示一部分。可以给article加min-height: 80vh;（或者根据需求设为100vh占满整个视口），保证容器有足够空间承载视频。

• 清除固定尺寸限制：别给视频或容器设置固定的像素宽高，全部用百分比或自适应值，比如width: 100%; height: 100%;，这样它们能跟着屏幕尺寸自动调整。

• 用媒体查询做针对性优化：如果通用设置还是有问题，针对小屏幕写个媒体查询调整：

  @media (max-width: 768px) {
    .myArticle {
      min-height: 100vh; /* 小屏幕下强制占满视口高度 */
    }
    #videoBack {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  

给你一个完整的CSS参考示例，直接套用试试：

.myArticle {
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden; /* 防止视频超出article范围 */
}

.fullscreen-bag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 把视频放在内容层后面 */
}

#videoBack {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键属性！ */
}

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