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);
}

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

（我过去只教过自己如何在过去两天内对网站进行编程，所以我可能听不懂你说的一切。请记住这一点。但是，我从那时起编程并从模板重新编写网站我已经浏览了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%;
}

无法将背景中心放在顶部，也不能全屏

1 个答案: