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

这演示了如何创建全屏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; 
}

我想知道所有这些属性背后的含义是什么。我理解为什么一个人用一个

固定的

位置和

z-index

来把这一切抛在脑后。我不明白的是：

• 为什么

  {width:100%；height:100%}

  不能正常工作，但是

  {width:auto；min width:100%；height:auto；min height:100%}

  的组合可以正常工作
• 为什么首先将

  top

  和

  left

  设置为50%，然后使用

  transform

  s将

  翻译

  返回
• 如何使其不是100%的视口，而是100%的父元素（例如a
  ）

为什么

{width:100%；height:100%}

不能正常工作，但是

{width:auto；min width:100%；height:auto；min height:100%}

的组合可以正常工作

<>这可能更容易解释，如果你认为HTML5视频是两个部分的事情：一方面你有容器（<代码> <代码>），另一方面你有电影（在<代码> <代码>或<代码> SRC < /代码>）。 设置

宽度

和

高度

时，您要做的是设置容器的

宽度

和

高度

，而不是电影本身。电影将增长/收缩，保持其纵横比，直到达到容器宽度或高度的100%

考虑到这一点，让我们分别来看这两种情况：

• 当您将

  宽度

  和

  高度

  设置为100%时，您将容器设置为一个特定值：占据屏幕的全部大小。然后，电影将根据容器的大小调整大小，如上所述，这就是导致顶部/底部出现“黑条”的原因（垂直视频为左/右）
  在这种情况下，“电影将适应容器大小”
  解决这个问题的一种可能性是，通过编程告诉电影使用CSS规则来适应容器：

  objectfit:cover

  。这与

  background size:cover

  处理图像的方式类似，但它可能不是最好的选择

• 当您将

  width

  和

  height

  设置为

  auto

  ，将

  minwidth

  和

  minheight

  设置为100%时，您只是为容器提供了一个指导：它必须至少具有屏幕的高度和宽度（但可以具有更多）。电影将能够在不包含限制的情况下按其纵横比成比例增长，因此其大小将溢出窗口之一
  在这种情况下，“容器将适应电影大小”

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

为什么首先将

top

和

left

设置为50%，然后使用

transforms

将

翻译回来

这是一个将视频置于屏幕中央的技巧。通常在电影中，动作发生在中心而不是角落；因此，您希望尽可能多地看到中心

如果您仅将视频的
顶部
和
左侧
值设置为0，并且
宽度
和
高度
（或
最小宽度
和
最小高度
）为100%，则视频将附加到左上角，您可能会错过右侧和底部的内容

通过将视频设置在屏幕中央并使用
transform
对其进行翻译，您可以确保视频的中心位于屏幕的中心，并且边框是不可见的


如何使其不是100%的视口，而是100%的父元素（例如a
）

这可以通过将该部分设置为相对位置，将视频设置为绝对位置（而不是固定位置）来实现。这样，视频将适应其父级而不是窗口

您链接的教程页面中也有类似的问题。同一个用户发布了他/她自己的解决方案（通过调整所述的相对/绝对位置），并共享了此代码笔中的代码：。
第二个点是一个技巧，通常用于元素的水平和垂直居中。例如，设置
left:50%
将元素的左边缘定位在中心，然后
translateX（-50%）
将左边缘进一步向左移动该元素宽度的一半。第一点基本上应该是允许元素在需要时扩展到100%以上。Harry，非常感谢！你应该把这句话作为回答，而不是评论——我会接受的！我没有添加它作为答案，因为我没有回答你所有的问题，也不确定是否需要在第1点设置（尽管我可以理解它在做什么）。阿尔瓦罗的回答涵盖了这一点：）阿尔瓦罗，精彩的回答。谢谢你抽出时间。