gpt4 book ai didi

css - 缩放 HTML5 视频并打破纵横比以填充整个站点

转载 作者:行者123 更新时间:2023-11-28 05:18:58 24 4
gpt4 key购买 nike

我想在网站上使用 4:3 视频作为背景。但是,将宽度和高度设置为 100% 不起作用,因为纵横比保持不变,因此视频不会填满网站的整个宽度。

这是我的 HTML 和 CSS 代码。

HTML:

<!DOCTYPE HTML>
<html land="en">

<head>

<link rel="stylesheet" type="text/css" href="html5video.css" />


<title>html 5 video test</title>


</head>

<body id="index">

<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>

<div class="cv">

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

</div>


</body>
</html>

CSS:

body
{
background-color:#000000;
}



#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}

.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}

最佳答案

这是一个非常古老的话题,我知道,我提出的不一定是您正在寻找的解决方案,但对于所有因为搜索我搜索过的内容而登陆这里的人:缩放视频以填充视频容器元素,保持比例不变

如果你想让视频填满<video>的大小元素,但视频已正确缩放以填充容器,同时保持纵横比不变,您可以使用 CSS 使用 object-fit 来完成此操作.很像background-size对于背景图片,您可以使用以下内容:

video {
width: 230px;
height: 300px;
object-fit: cover;
}

希望对一些人有所帮助。

编辑:works in most browsers but IE

关于css - 缩放 HTML5 视频并打破纵横比以填充整个站点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39164255/

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