Question

我试图在我的页面上放置100％宽度但任何可变高度的视频，例如300px;

我不希望视频扩展，我想如果视频的底部被切断了。我试图用可怕的形象来表现这一点。

＆＃13;

video {
    position:relative;
    z-index:-1;
    width: 100%;
}

＆＃13;

<div id="container" align="center">
    <video autoplay>
      <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
    </video>
</div>

＆＃13;

原创视频：

---------------
|             |
|             |
|             |
---------------

自定义高度的原创视频：

---------------
|             |
|             |
---------------
| Cut off     |
---------------

Answer 1

在css中，设置容器DIV的高度（在您的示例中，明确命名为sendfile）并设置#container：

overflow:hidden

视频仍然是成比例的（宽高比），因为视频元素为video { position:relative; z-index:-1; width: 100%; } #container{ height:300px; overflow:hidden; }和width:100%（默认值）。

但是，在300px时，视频元素将延伸到容器div下方，并被切断（因为height:auto）。

使视频宽度保持100％，同时保持自定义高度

1 个答案: