img图片的处理技巧

时间：2020-06-16 17:20:05 收藏：0 阅读：43

外面的盒子div包裹着里面的图片；

通常情况下，会给外面的盒子一个padding-top: 100%，相当于占位符，当图片还没有加载出来的时候，占住位置，防止白屏

<div class="img-wrap">
      <img :src="img" alt />
</div>

.img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    margin-bottom: 0.571429rem;
    @include borderRadius(0.357143rem);
    overflow: hidden;
    cursor: pointer;
    &:hover {
      .desc-wrap {
        transform: translateY(0);
      }
      .play-icon-wrap {
        opacity: 0.9;
      }
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }

原文：https://www.cnblogs.com/hahahakc/p/13141247.html