视频未占据容器宽度和高度的100％

Question

我有以下HTML代码：

<div class="wallpaper-container">
        <div class="wallpaper-media wallpaper-image native">
           <!-- <img src="video/space.jpg"> -->
        </div>
        <div class="wallpaper-media wallpaper-video animated">
            <video loop muted autoplay>
                <source src="video/space.webm" type="video/webm">
                <source src="video/space.mp4" type="video/mp4">
                <source src="video/space.ogv" type="video/ogg">
            </video>
      </div>
 </div>

和以下CSS：

body  {
    margin: 0;
    padding: 0;
}

.wallpaper-video  {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

video  {
    height: 100%;
    width: 100%;
}

基本上我希望视频覆盖100％的屏幕，但事实并非如此，有人可以解释原因吗？它在chrome中的外观如下：

正如你所看到的，vedio没有占据容器的100％宽度，现在可以使用以下样式：

.wallpaper-video  {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
    }

即。容器确实需要100vh和100vw，但视频不会以100％width和height为视频。

也是水平卷轴，这是非常不希望的。我做错了什么？

Answer 1

好的结果是让视频的宽度为100％，高度为100％，当然如果设置以下CSS：

MyProperty

视频将保持它的宽高比（因此会留下空白区域），我相信这种行为与图像不同，因为图像可以拉伸到100％宽度和高度，即使它会看起来变形，所以使用视频元素时的解决方案是使用以下样式：

class Program
{
    static void Main()
    {
       // Write single line to new file.
       using (StreamWriter writer = new StreamWriter("C:\\log.txt", true))
       {
          writer.WriteLine("Important data line 1");
       }

       // Append line to the file.
       using (StreamWriter writer = new StreamWriter("C:\\log.txt", true))
       {
           writer.WriteLine("Line 2");
       }
    }
}

现在它需要100％的容器宽度。

P.S。同时将容器设置为video { height: 100%; width: 100%; } ，以隐藏可能溢出的视频部分。