Html页面使视频铺满盒子

在编写代码时，我们会遇到将视频植入进页面的情景，而如果设置不当，视频往往会撑破盒子，扰乱我们的布局。

        .try {
            width: 300px;
            height: 300px;
            background-color: #666;
        }

我们设置好一个盒子

置入视频，由于视频宽高比大于盒子，视频往往会撑出盒子。

    <div class="try">
        <video src="./尝试.mov" autoplay="autoplay"></video>
    </div>

此时我们可以通过设置object-fit属性来使视频拉伸铺满盒子，object-fit属性的更多资料可以在object-fit - CSS（层叠样式表） | MDN (mozilla.org)中获取

            width: 100%;
            height: 100%;
            object-fit: fill
        }

结果如下