Question

此example演示了如何制作全屏HTML5视频。它使用以下CSS代码：

video#bgvid { 
   position: fixed;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -100;
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   background: url(polina.jpg) no-repeat;
   background-size: cover; 
}

我想知道所有这些属性背后的含义是什么。我理解为什么一个人使用fixed职位而z-index将其全部放在后面。我无法理解的是：

为什么{ width: 100%; height: 100% }无法正常工作，但{ width: auto; min-width: 100%; height: auto; min-height: 100% }的组合确实有效。
为什么先使用top将left和translate设置为50％，然后再设置为transform？
如何使其不是100％的视口，而是100％的父元素（例如<section>）？

Answer 1

为什么{ width: 100%; height: 100% }无法正常工作，但{ width: auto; min-width: 100%; height: auto; min-height: 100% }的组合确实如此。

如果您将HTML5视频视为两部分，这可能更容易解释：一方面您拥有容器（<video>），另一方面您拥有电影（在{中指定） {1}}或<source>）。

当您设置src和width时，您正在做的是设置容器的height和width而不是电影本身。电影将增长/缩小，保持其纵横比，直到它达到容器宽度或高度的100％。

考虑到这一点，让我们分别看两个案例：

将height和width设置为100％时，您将容器设置为特定值：占据屏幕的完整大小。然后，如上所述，电影将其大小调整为容器的大小，这就是导致顶部/底部（或垂直视频的左/右）“黑条”的原因。

在这种情况下，“电影将适应容器大小”。

解决此问题的一种可能性是，使用CSS规则以编程方式告诉电影适合容器：height。这与object-fit:cover处理图片的方式类似，但它可能不是object-fit is not fully supported的最佳选择。
当您将background-size:cover和width设置为height，将auto和min-width设置为100％时，您只需提供指南到容器：它必须至少具有屏幕的高度和宽度（但它可以有更多）。电影将能够按比例增长，而不受限制，因此它的尺寸将超出其中一个窗口。

在这种情况下，“容器将适应电影大小”。

这些图片代表了我在上面尝试解释的案例中发生的事情，我希望它有所帮助：

为什么首先使用min-height将top和left设置为50％，然后再设置translate？

这是将视频置于屏幕中心的技巧。通常在电影中，动作将发生在中心周围而不是角落;所以你希望尽可能多地看到中心。

如果您只是将transforms和top值设为0，left和width（或height和{{1} }）100％，然后视频将附加到左上角，你可能会错过右侧和底部的内容。

通过将视频设置在屏幕中央并使用min-width进行翻译，您可以确保视频的中心位于屏幕的中心，边框是被忽略的边框观点。

如何使其不是100％的视口，而是100％的父元素（例如min-height）？

这可以通过将该部分设置为transform位置，将视频设置为<section>位置（而不是relative）来实现。这样，视频将适应其父级，而不是窗口。

您链接的教程页面中的类似问题是asked as a comment by EM。该用户发布了他/她自己的解决方案（通过调整所描述的相对/绝对定位）并共享此codepen中的代码：http://codepen.io/emmajean/pen/nyhFL。

全屏<视频>：这是什么样的CSS魔术？

1 个答案: