2021-06-04 css设置图片等比例显示，不指定px

在列表显示的时候，如何保持这个比例，很简单，我们首先把3/4=0.75,那么比例就是0.75.

具体样式代码如下：

          <div v-for="(item, index) of listData" :key="index" class="template-item">
            // 图片位置
            <div class="template-img">
              <img :src="item.coverUrl">
            </div>
            <div class="template-content">
              <div class="title">{{ item.title }}</div>
              <div class="action-wrap">
                <i class="el-icon-delete template-btn" @click="onDelete(item.id)" />
                <i class="el-icon-edit template-btn" @click="onEdit(item.id)" />
              </div>
            </div>
          </div>

.template-list {
    padding-left: 16px;
    .template-item {
      display: inline-block;
      width: 16.66%;
      padding-right: 16px;
      margin-bottom: 16px;
      background-color: #f2f2f2;
      background-clip: content-box;

      .template-img {
        position: relative;
        padding-bottom: 75%; //重点位置，3/4=0.75
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }