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/

响应高度/宽度视频标题

1 个答案: