背景视频缩放
问题描述:
试图在HTML5中创建背景视频。以下代码不必要地缩放显示。背景视频缩放
CSS:
#bgvid3 {
position:absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100vh;
width: auto;
height: auto;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
我已经做了广泛的测试和估计变焦是%-20%,10之间。相信我,我已经允许宽高比,但仍不明白为什么它会增加视频的比例。
显然,这会影响视频的整体质量,使其看起来更像素化。
答
下面是答案...
.bgvid3 {
object-fit: cover;
object-position: center center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
不知道为什么这个工程,但它(你会觉得与宽度&高度100%你有一些方面的问题)。没有缩放和在所有屏幕上工作。
您也可以为IE添加此代码。 @media所有和(-MS-高对比度:无),(-MS-高对比度:活性){ \t/*仅IE */ \t#bgvid2 { \t \t位置:绝对; \t \t top:20%; \t left:50%; \t最小宽度:100%; \t最小高度:100vh; \t宽度:自动; \t身高:自动; \t \t -ms-transform:translate(-50%,-20%); \t \t -moz-transform:translate(-50%,-20%); \t \t -webkit-transform:translate(-50%,-20%); \t \t -o-transform:translate(-50%,-20%); \t \t transform:translate(-50%,-20%); \t} } – user7498278