问调整<video>元素到父div的大小

EN

是否有人能够成功地将video元素的大小调整为父div？

我的视频元素包含一个带有ratio of 4:3的网络摄像头流。我想打破这个比例，并将其调整为div大小。我尝试过以下几种方法：

• Set width and height 100% >这不会做任何事情，4:3仍然是
• Set min-height and min-width 100% >这使得视频调整到一些非常大的东西，溢出了div也会在父div
• 上产生巨大的流量使用javascript获取父div高度和宽度，然后为视频设置它:没有效果，4:3比例保持不变。

<代码>F214

该怎么做呢？

编辑：感谢Gaurav非常详细的回复。它看起来不错，但我希望它能为我工作。

.parentDiv // Results in around 400x400 pixels for me
{
    position: absolute;
    top: 11px;
    right: 10px;
    left: 10px;
    height: -webkit-calc(50% - 18px);
    height: calc(50% - 18px); 
    display: block;
} 

我的视频元素在里面，我给了它你的CSS解决方案。不幸的是，它只变成了白色。我的parentDiv css会与此有关吗？

HTML 2：这是：

<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>                      
</div>

这主要是它。视频的src属性被设置为我的网络摄像头流。

编辑3个

如果我右击并查看屏幕截图https://s22.postimg.cc/th4ha8nmp/ratio2.png中的白色部分(现在是红色的涂鸦)，Chrome会显示白色也属于流。

看起来好像摄像头的流在顶部和底部都有白色的条纹。这是..。很烦人。