Question

我有一张图像，我将其用作背景，以防视频背景无效。它具有响应性，并且按照预期的方式工作，但图像的顶部和底部都有黑色空间。请参阅：https://robotplaytime.paperplane.io/

将屏幕宽度调整得更小，黑色空间变得更加突出。

知道如何移除黑色空间吗？需要保持纵横比。图像可能大于屏幕尺寸。

由于

HTML

<body>
    <video poster="images/robotPlaytimeVideo.png" id="bgvid">
    </video>
</body>

CSS

video {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    background: url(../images/robotPlaytimeVideo.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

全屏背景图片 - 删除黑色空间？

0 个答案: