无法在顶部获得背景中心，也无法全屏

Question

我想要的是背景视频纵向（y）适合屏幕并在小于比率时横向裁剪（x）。就像现在一样，当有人在一个又长又瘦的浏览器中查看时，一半的视频会在右侧被截断，而不是两边都被缩小并集中在中间。或者，我希望整个东西向各个方向伸展并适合浏览器，但我也搜索了关于它的每一页，但似乎没有一个命令有效......我不知道也许少有一个新命令，但我可以没找到……

我正在编辑 .less 文件以完成我需要的工作，几乎所有的 css 命令似乎都可以工作，除了我需要的那个，或者至少，在我尝试过的任何地方都没有......仍然不确定是什么css 和 less 之间的区别在于更新/更好。这就是我所拥有的，这是迄今为止我发现的最好的。它至少在变小时会收缩到中间：

// Background
#rt-top-surround {
position: relative;
video {
    position: fixed;
    width: auto;
    height: 100%;
    min-width: 100%;
    -webkit-background-size: cover;  }
    -moz-background-size: cover;       } these do nothing at all
    -o-background-size: cover;         } neither does background-size: 100%;
    background-size: cover;          }
    .backface-visibility(hidden);
}

无论我做什么，我都无法阻止它保持纵横比。对全屏或背景视频居中的任何帮助都可以。提前致谢 -斯科特

（在过去的 2 天里，我只是在自学如何编写网站，所以我可能无法理解您所说的一切。请记住这一点。但是，从那时起，我确实使用模板对网站进行了编程和重写我已经浏览了 ftp 上的每个文件并阅读了 css 只是为了了解我能做的事情。我实际上知道相当多）

Answer 1

你的 CSS 无效，#rt-top-surround 没有关闭，所以下面的任何东西都被破坏了。

// Background
#rt-top-surround {
position: relative;
} /* <------ here! */

至于background-size，这只适用于background-image，而不是视频元素。您可以简单地将width 设置为您想要的任何内容，因为height:auto 默认适用，它是按纵横比缩放的。

jsFiddle

HTML

<video>
    <source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>

CSS

video {
    width:100%;
}