padding-top 100%应用

这里学习到的是当margin padding 赋值为%百分比的时候，是按父元素的width为参照物，于是很多应用来先占位布局，再加载元素，例如图片的加载，防止页面抖动或闪一下的感觉，尤其网站状况不佳的情形下很容易出现！

下面是一个应用padding 百分比的例子：

<div class="image-header" ref="imageHeader">
          <img class="image image-hook" :src="food.image"/>
          <i @click="goback" class="icon-arrow_lift back-left"></i>
</div>

.image-header
      position relative
      width 100%
      height 0
      padding-top 100%
      background-color gray
      .back-left
        position absolute
        left 20px
        top 30px
        padding 5px
        color white
        font-size 26px
        background-color rgba(7,17,27,0.2)
      img
        position absolute
        top 0
        left 0
        width 100%
        // height 100% 加了这里图片拉伸了

注意上面的注释部分，height:100% 开启后图片显示就是一个正方形的比例，如果图片本身不是一个正方形的比例，会看到明显的被拉伸，用户感觉不是很好！

本人没有想到好的从css写法上来解决的办法，最后依赖js处理了。效果还是可以的！

this.$nextTick(() => {
     var imageWrapper = this.$refs.imageHeader;
     var img = imageWrapper.getElementsByClassName('image-hook')[0];
     imageWrapper.style.paddingTop = `${img.offsetHeight}px`;  
});