全屏背景video并保持居中
我正在尝试创建一个网站，我在其中播放一些HTML5背景video。 这一切都很完美，它按照我想要的方式工作。 但我也希望将图像保持在屏幕中心，即使用户调整浏览器大小。
我得到了一些jQuery，但想知道是否有一个CSS解决方案。
function resizeHandler() { // scale the video var documentHeight = $(document).height(); var documentWidth = $(document).width(); var ratio = $('#video').width() / $('#video').height(); if((documentWidth / documentHeight) < ratio) { $('#video').css({ 'width': 'auto', 'height': '100%', 'left': '0px', 'right': '0px', 'top': '0px', 'bottom': '0px' }) var marginRight = $('#video').width() - $(document).width(); $('#video').css('left', -marginRight); } else { $('#video').css({ 'width': '100%', 'height': 'auto', 'left': '0px', 'right': '0px', 'top': '0px', 'bottom': '0px' }) var marginTop = $('#video').height() - $(document).height(); $('#video').css('top', -marginTop); } }
这是我写的jQuery，用于拉伸图像以适应屏幕，并使图像保持居中。 不确定这是否可以在CSS中使用，但如果有人知道如何，这可能会很好。
这个问题刚刚被引用到使用css或javascript的100％高度和100％宽度的Placevideo
我想我的答案可能就是你要找的那个？
这是代码：
header { position: relative; height: 100vh; z-index: 0; } header h1 { text-align: center; font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; color: #fff } header video { -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; }
Sample Title
我会尝试将video居中放置在固定包装器内的绝对位置。 例如：
将您的video放在100％宽度和高度的固定包装中：
#video-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
使用margin auto将video置于一个超大区域内：
#video { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }
并将其拉伸至最大尺寸，最小宽度和最小高度：
#video { min-width: 100%; min-height: 100%; width: auto; height: auto; }
这里是最终结果：
#video-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #video { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; min-width: 100%; min-height: 100%; width: auto; height: auto; }
这应该使#video成为视口的整个大小，并在用户滚动时保持在那里。
#video { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
使用Css属性。 物体贴合：覆盖;
body, html { padding: 0; margin: 0; height: 100%; width: 100%; } video { height: 100%; width: 100%; }