css - 响应高度/宽度视频标题

Question

我正在为一个网站制作响应式 html5 视频标题，我希望它在垂直和水平方向上响应，仅使用 CSS 来实现响应。

http://jsfiddle.net/b9cpmuy9 是我用于响应宽度的内容(这里有从另一篇文章借来的视频)。

width:100%;height:auto; 适用于响应宽度。

我尝试了 height:100%;width:auto;min-width:100%; 响应高度，但它只能工作到源文件的整个宽度，并且只有在较小的时候剪辑到右边。我希望它保持居中并从左右两边剪裁。

我希望它像这样工作:http://salleedesign.com/home , 但有视频。可以吗？

更新: http://jsfiddle.net/x22r8her/1/我有东西!我能看到的唯一错误是，当它变得足够小(宽度方向)时，它开始只在右边剪裁。这是为什么？

Answer 1

HTML 元素是左上对齐的。您可以做的是将容器扩展到更大的尺寸并使用 margin: auto

示例 CSS:

video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    height: auto;
    min-height:100%;
    min-width:50%;
}

演示:http://jsfiddle.net/mLnsbyk1/