以视频插入页眉，缩小浏览器窗口，页眉出现空隙，该如何解决？

Question

以视频插入页眉，缩小浏览器窗口，页眉出现空隙，该如何解决？

发布于
2021-06-19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="css\index.css">
    <link type="text/css" rel="stylesheet" href="css\mainpage.css">
    <title>个人博客主页</title>
</head>
<body>
    <header>
        <div style="width:100%;height:130px;">
            <video autoplay loop width=100% height=130px >
                <source src="./video/页眉视频.mp4">
                <source src="./video/页眉视频.webm">
                <source src="./video/页眉视频.ogv">
                <p>Sorry, your browser doesn't support the video element.</p>
            </video>
        </div>
    </header>
</body>
</html>

以上为包含页眉的html代码，以下为相关的css代码

body{
    background: url("../img/index_background.jpg") no-repeat center 0;
    background-size: cover;
    background-attachment: fixed;
   
    cursor: url("../img/鼠标样式.ico"),auto;
    margin: 0;
    padding: 0;
   
}



header{
    
    width:100%;
    height:130px;
    
    margin:0px;
    padding: 0px;
    
}

链接：https://pan.baidu.com/s/1ZvTF...
提取码：6661
复制这段内容后打开百度网盘手机App，操作更方便哦

mp4视频已放入网盘

由图可见，在浏览器缩小后，视频画面也缩小，想请问能否有办法使视频占满整个页眉区，不随浏览器窗口的变化而出现空隙，谢谢谢谢，望解答！

前端 css html

阅读 1.5k

1 个回答

得票最新

linong

29.2k1368137

发布于
2021-06-19

object-fit 具体要啥效果你就自己调整一下。contain 还是 cover，还是 fill，这就随你了。

然后你还可以考虑给他一个背景色，让他有个黑色背景之类的，区分出来。