响应式高度/宽度视频标题答案

【问题标题】：Responsive Height/Width Video Header响应式高度/宽度视频标题
【发布时间】：2019-12-22 02:37:03
【问题描述】：

我正在为网站制作响应式 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/我有东西！我能看到的唯一错误是，当它变得足够小（宽度方向）时，它只会在右侧开始剪裁。这是为什么呢？

【问题讨论】：

你的意思是全屏视频吗？
是的。它的容器是width:100vw;height:100vh;
你想让它也打破视频的纵横比吗？
不，我宁愿把它从容器的边缘剪掉
见这里：stackoverflow.com/questions/28204932/…

标签： css html

【解决方案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/

【讨论】：