0

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

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

// 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 只是为了了解我能做什么。我实际上知道相当多的数量）

4

1 回答 1

0

你开始你的 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%;
}
于 2013-03-30T09:30:45.343 回答