Javascript-如何在不按高度剪切图片的情况下，将视频屏幕的宽度和高度固定为拉伸

这是不正确的，我试图将视频屏幕完全设置为100%宽度和100%高度。但是在更大的分辨率上，它不能正确显示从视图中获得的高度

以下纵横比正在工作，但问题是它会使左右两侧出现错误的黑色：

预期输出为“调整大小”、“最大化”或“全屏”：

任何人都可以建议，我完全迷路了，无法做出准确的预期输出

---

编辑：

您可以为此尝试css：

video { 
       width:305px; 
       height:160px;  
       background:blue; 
    }

如果视频海报包含图像

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

但是，只有当你有固定数量的视频时，这才有用。否则，您将需要执行内联css来重置那里的背景图像

---

使用您的解决方案更新：

这些颜色组合对眼睛来说太残酷了。我会三思而后行，将视频拉伸到合适的大小，但我在弹出窗口中看到了它，用户正在调整它的大小，并尝试将其最大化。怎样才能准确地拉伸呢。在不丢失高度图像的情况下。您应该显示您的POC，至少是您正在编写的HTML。我尝试了您的代码，但它不起作用，当我调整窗口大小时，它不是全屏的，当我最大化屏幕时，它不是自动缩放的。

video { 
       width:305px; 
       height:160px;  
       background:blue; 
    }

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}