纯css实现视频容器动态尺寸并且固定长宽比

1. 使用场景

PC端播放视频容器一般要求是16：9，同时支持多路视频同时播放，可选多种窗格22 、33 、1*1等等。。。就是要实现宽度变化，高度跟着变化，并且保证长宽比为16：9，或者其他比例，看项目需求。

纯css实现原理

1. 设置外层容器。开启flex布局，使内部元素动态占满容器，注意开启换行
2. 设置内部元素宽度，根据不同的窗格数量，设定不同的百分比宽度，让其占满容器
3. 使用一张图片，其长宽比为16：9，尺寸可以为1920*1080，将其放入每个内部元素，并设置img的宽度为100%，注意不要设置高度，这样图片的宽度总是占满内部元素的宽度，为了保证图片的比例不变，图片的高度会自动变化。然后图片的高度会撑开每个内部元素。从而实现每个内部元素的动态尺寸且固定长宽比；比例由图片本身尺寸控制；
4. 在每个内部元素（放图片的同级）中设置一个元素，开启定位，让其覆盖在图片上。这里放你的业务组件
5. 扩展性： 可以让这个图片做成加载中的样式，在业务组件没加载完成之前显示。业务组件加载之后覆盖图片。完美，这样就不用去判断加载中的显示与隐藏，简单实用。

直接上代码（当前组件中没有的class为全局公共class，开发者自己一看就懂）

效果图