gpt4 book ai didi

html - 使HTML背景视频高度变小宽度100%

转载 作者:太空宇宙 更新时间:2023-11-04 09:44:59 25 4
gpt4 key购买 nike

我正在尝试向网站添加背景视频,并试图使其高度等于 400 像素,宽度等于 100%。但是,当我添加 400px 高度时,它的宽度变小了。我不想让视频全屏显示,我希望它只有 400 像素的高度(或更大一点)和 100% 的宽度,就像在 airbnb.com 上一样。

这是 HTML :

    <html>
<head>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="videoDiv">
<video autoplay loop mute id="video">
<source src="video/video.mp4" type="video/mp4">
</video>
</div>
<div>
<h1>Hello</h1>
</div>
</body>
</html>

这是CSS:

    #videoDiv{
height: 400px!important;
}
#video{
position: fixed;
max-height: 400px!important;
min-width: 100%;
}

Here是它的链接。请帮忙!

最佳答案

视频元素的默认样式表是 object-fit: contain; 因此它始终保持其尺寸比例。所以你需要做的就是做“填充”而不是覆盖它。像这样:

#video{
position: fixed;
max-height: 400px;
min-width: 100%;
object-fit: fill;
}

关于html - 使HTML背景视频高度变小宽度100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39551134/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com