关于loading问题

[TZYMRX]

https://image-static.segmentfault.com/376/883/3768834156-660421cdcc007 大佬知道这个加载怎么做吗 加载的时候布局，loading图和原图比例也不会乱

[heikaimu]

其实你只要能够在返回的信息里面带上这个图片的宽高信息，就能在写卡片的时候，提前把容器的形状固定了，就能实现它这个。

[TZYMRX]

其实你只要能够在返回的信息里面带上这个图片的宽高信息，就能在写卡片的时候，提前把容器的形状固定了，就能实现它这个。

有宽高信息，就是不知道怎么写 😫

[heikaimu]

    .container {
      width: 200px;
    }

    .card {
      width: 100%;
      height: 0;
      padding-bottom: 50%;
      position: relative;
    }

    .card__content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: red;
    }

    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

  <div class="container">
    <div class="card">
      <div class="card__content">
        <img src="./2.jpeg" alt="" srcset="">
      </div>
    </div>
  </div>

把padding-bottom写成用width和height计算的就可以了。宽高比

[TZYMRX]

    .container {
      width: 200px;
    }

    .card {
      width: 100%;
      height: 0;
      padding-bottom: 50%;
      position: relative;
    }

    .card__content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: red;
    }

    img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

  <div class="container">
    <div class="card">
      <div class="card__content">
        <img src="./2.jpeg" alt="" srcset="">
      </div>
    </div>
  </div>

把padding-bottom写成用width和height计算的就可以了。宽高比

感谢大佬