zoukankan      html  css  js  c++  java
  • img图片的处理技巧

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

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

    <div class="img-wrap">
          <img :src="img" alt />
    </div>
    .img-wrap {
        position: relative;
         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;
           100%;
          height: 100%;
        }
      }

  • 相关阅读:
    02-cocoapods的安装和使用
    01-唐巧之cocoapods
    class0513(html)
    程序集
    c#面向对象
    html
    dom
    Javascript
    Jquery
    ado.net
  • 原文地址:https://www.cnblogs.com/hahahakc/p/13141247.html
Copyright © 2011-2022 走看看