响应式高度/宽度视频头

Question

我正在制作一个响应式的html5视频头部，希望在垂直和水平方向上都具备响应能力，只使用CSS来实现响应。这是我用于响应宽度的代码：http://jsfiddle.net/b9cpmuy9（从另一篇文章中借用了视频）。对于响应宽度，width: 100％; height:自动;可以工作。我尝试了height:100%;width:auto;min-width:100%;以实现响应高度，但它仅适用于源文件的全宽度，当较小时仅剪切右侧。 我希望它保持居中并从左侧和右侧裁剪。我想让它像http://salleedesign.com/home这样工作，但用视频实现。这可能吗？更新：我有了一些成果！http://jsfiddle.net/x22r8her/1/ 唯一我看到的问题就是当宽度变得足够小（仅限于宽度）时，它开始只在右侧剪切。为什么会这样？

- Ian Ebstein

---

您指的是全屏视频吗？ - Skaty

是的。它的容器是 width:100vw;height:100vh;。 - Ian Ebstein

你想要打破视频的宽高比吗？ - Skaty

不，我宁愿它在其容器的边缘处被剪裁。 - Ian Ebstein

请查看此处：http://stackoverflow.com/questions/28204932/video-height-and-width-for-responsive-website/41811314#41811314 - Giacomo Paita

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

Demo: http://jsfiddle.net/mLnsbyk1/

- Skaty