我遇到的问题是,在我的登录页面上,我的视频背景不适合整个屏幕宽度。背景效果完美,但视频背景不会自动 100% 适合。
我的登录屏幕应该是这样的:
这是我的登录屏幕在设备上的实际外观:
如您所见,我的设备屏幕对于视频来说太宽了。 由于屏幕左侧和右侧的白色条,您可以看到它。 那么有什么方法可以自动将视频始终拉伸(stretch)到 100% 宽度吗?
这是我的 HTML fragment :
<video webkit-playsinline playsinline autoplay loop muted id="introp99">
<source src="assets/video/introp99.mp4" type='video/mp4; codecs="h.264"'>
<source src="assets/video/introp99.webm" type="video/webm">
</video>
这是我的 CSS fragment :
//P99 Background Video
#introp99 {
position: fixed;
filter: blur(2px);
padding:0px;
top: 50%;
left: 50%;
min-width: 150vw;
width:105%;
height:105%;
z-index: -100;
-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%);
background: url('../assets/video/introp99.mp4') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
正如您在我的 CSS 中看到的那样,我已经尝试将宽度设置为 100% 以上,例如 width: 110% 或 width: 150vw;但没有任何改变。视频始终保持相同的格式并且不会拉伸(stretch)。
最佳答案
经过长时间的研究,我终于可以通过将 object-fit: fill;
添加到视频 CSS 来实现它。
关于android - Ionic/Css/HTML 视频背景不填充背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44183293/