【问题标题】：Fullscreen html page and fullscreen video without black borders全屏 html 页面和无黑边的全屏视频
【发布时间】：2014-05-28 13:49:00
【问题描述】：

我有这个 html：

<div id="container">
  <video id="video" src="video.ogv" loop></video>
</div>

Div“容器”和视频填满整个屏幕

#container {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

#container video {
   position: absolute;
   top: 0px:
   left: 0px;
   height: 100%;
   width: 100%;  
}

我正在测试的显示器是 1920x1080，而视频是 1280x720：显然我获得了两个黑色边框（顶部和底部）。

如何在不拉伸的情况下无边框观看视频？

我已经搜索过了，比如here，但不是我的情况。

编辑

我忘记了 min-width: 和 min-height 属性，正如 HoangHieu 建议的那样！

CSS 变成：

#container video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

【问题讨论】：

标签： javascript jquery html css video

【解决方案1】：

你可以使用属性：最小宽度：和最小高度：

【讨论】：

不要忘记最大宽度和最大高度。