我正在设计一个主页，其视频背景适合全屏调整大小，没有空白。最初，我的代码一直有效，直到我在其各自的部分中添加了几张图像。现在，当屏幕尺寸增加时，视频右侧有一个空白，当屏幕尺寸减小时，图像旁边有一个空白。
我在canva上设计了该网站，如果这有助于理解我的目标，这就是我希望的理想情况：www.specialangelsflowers.com
HTML
<body>
<header>
// this is where I have my navbar, left it out due to irrelevancy //
</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>
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;
}
我的 github 上的完整代码（如果也有帮助的话） https://github.com/bananasantana/specialangels
添加到您的样式表：
#video video {
width: 100%;
height: 60vh;
object-fit: cover;
}