作者:手机用户2502937333 | 来源:互联网 | 2023-05-27 17:35
我试图保持背景视频居中,无论用户拖动视频有多大.当我滚动较小时,它目前正在切断视频的右侧.这就是我所拥有的:
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
我希望视频的中心始终是页面的中心,即使侧面被切断 - 如果它以这种方式发生,这实际上是理想的.非常感谢任何帮助.谢谢阅读!
1> Todd..:
这是我通常如何做背景视频,以及我是如何为stre.am登陆页面做的:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
2> 小智..:
这个更短,适合我.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
3> lohfu..:
在我的用例中,我总是希望视频覆盖整个视口(无论视口宽高比是大于还是低于视频),上述解决方案都无法完全按照我的意图工作.相反,以下工作更好:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
@media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
我的视频是1920x1080,这适用于IE11(没有测试更低)和更高.
对我来说效果最好 - 这也是媒体查询的绝佳用法!我添加了溢出:隐藏; 到.video-container以防止在移动设备上左/右滚动