Question

尝试在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%);
}

我做了大量的测试并估计缩放在10％-20％之间。相信我，我已经允许纵横比，但仍然不明白为什么它会增加视频的规模。

显然，这会破坏视频的整体质量，使其看起来更像素化。

Answer 1

这是答案......

.bgvid3 {
    object-fit: cover;
    object-position: center center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

不确定为什么会这样，但确实如此（你认为宽度和高度100％你会遇到一些问题）。没有缩放并适用于所有屏幕。

背景视频缩放

1 个答案: