HTML&CSS：全屏视频与图片背景适配留白问题求助

设计首页时要求视频背景全屏无留白，原本代码运行正常，添加多个带图片背景的独立区块后，出现屏幕放大时视频右侧留白、屏幕缩小时图片旁留白的问题，目标为实现全屏无留白的滚动效果。

相关代码 #

HTML片段 #

<body>
    <header>
        <!-- 导航栏代码，此处省略 -->
    </header>
    <main>
        <section class="video" id="video">
            <div class="storename">
                <h1>Special Angels Flowers</h1>
            </div>
            <video autoplay muted loop id="homepagevideo">
                <source src="quince.mp4" type="video/mp4">
            </video>
        </section>
        <section class="quince" id="quince">
            <div class="quince-bg">
                <h2>Quinceañeras</h2>
            </div>
        </section>
    </main>
</body>

CSS片段 #

body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
}
.homepagevideo video{
  object-fit: fill;
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
}
.quince-bg{
  background-image: url("quince.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
    padding: 0;
}

1. 修正视频选择器与定位 #

原CSS中视频选择器错误，且缺少定位属性导致偏移，同时object-fit: fill会拉伸视频变形，修改如下：

#homepagevideo {
  object-fit: cover; /* 保持视频比例的同时全屏覆盖 */
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1; /* 确保视频在内容下方 */
}

2. 重置基础样式消除留白 #

修复body默认边距和横向滚动问题：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 禁止横向滚动条 */
}

3. 调整图片区块样式 #

重置section默认边距，避免背景留白：

.quince {
  margin: 0;
  padding: 0;
  width: 100%;
}
.quince-bg{
  background-image: url("quince.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* 若需视差效果可保留fixed，但需确保无布局冲突 */
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100%;
}

4. 层级与滚动适配 #

视频设置z-index: -1确保内容区块正常显示，overflow-x: hidden防止横向留白和滚动条出现。

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