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

时间:2015-02-09 19:08:17

标签: html css html5

我有一张图像,我将其用作背景,以防视频背景无效。它具有响应性,并且按照预期的方式工作,但图像的顶部和底部都有黑色空间。请参阅: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 个答案:

没有答案