全屏html页面和全屏视频没有黑色边框

Fullscreen html page and fullscreen video without black borders

本文关键字：视频 黑色 边框 html 全屏      更新时间：2023-09-26

我有这个html:

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

Div"container"视频占据了整个屏幕

#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:显然我获得了两个黑色边框(顶部和底部)。

如何查看视频没有边界和不拉伸它?

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

<标题>编辑

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

CSS成为:

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

可以使用property: min-width:和min-height:

相关文章：