如何在不改变高度的情况下增加视频的宽度？

Question

我的标题中有视频，我希望视频的高度为80vh，宽度为总页面的80％。现在的问题是，当我改变宽度时，高度也会改变，而当我改变高度时，宽度也会改变。 下面是我现在得到的图像。

这是我创建的一个区块，这就是我想要我的视频的方式 这是我的代码：

HTML ：

<div id="main-container">
  <header>
    <video autoplay muted loop id="main-video">
      <source src="img/header-video.mp4">
    </video>        
</header>

CSS ：

#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
    width: 100%;
    height: 100%;
}

从这段代码中，我得到了这个结果

这不是重复副本，原因是我的问题与视频有关，普通的div元素完全可以正常工作，但对于视频却不起作用。当我扩展高度时，它会自动扩展其宽度，反之亦然。

Answer 1

我找到了解决问题的办法。我唯一要做的就是添加 object-fit：fill ，以防万一。这将根据需要拉伸视频。

#main-container {
    width: 90%;
    margin: 0 auto;
}
#main-video {
    object-fit: fill;
    width: 80vw;
    height: 50vh;
}

现在的样子

Answer 2

只需尝试使用此CSS-

#main-container {
width: 80%;
margin: 0 auto; height:80vh;}

#main-video{
object-fit:cover;
width: 100%;
height: 100%;

}

这不会拉伸您的视频，并且会覆盖该容器。