纯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，开发者自己一看就懂）

<template>
  <div class="video-box">
    <div v-for="(e, i) in windowNum" :key="i" :class="['video-item', 'video-' + windowNum]">
      <img :src="tcimg" alt="">
      <div class="video-view">
        视频内容
      </div>
    </div>
    <div>
      <p class="flex flex-row-start" style="margin-top:20px">
        视频规格： <span class="gg-1" @click="changeNum(1)"></span> <span class="gg-1 gg-4" @click="changeNum(4)"></span
        ><span class="gg-1 gg-9" @click="changeNum(9)"></span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SmartthingsWebVideogroup',
  props: {
    winList: {
      type: Array,
      required: true
    }
  },
  watch: {
    winList(n, l) {
      console.log(n, '最新的')
    }
  },
  data() {
    return {
      windowNum: 1,
      tcimg: require('@/assets/images/16-9.png')
    }
  },

  mounted() {
    console.log(this.winList)
  },

  methods: {
    changeNum(val) {
      this.windowNum = val
    }
  }
}
</script>

<style lang="less" scoped>
.video-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  .video-item {
    position: relative;
    margin-top: 10px;
    img{
      width: 100%;
    }
    .video-view{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: #ccc;
    }
  }
  .video-1 {
    width: 100%;
  }
  .video-4 {
    width: calc(50% - 5px);
  }
  .video-9 {
    width: calc(33.33% - 6px);
  }
}
</style>

效果图