关于懒加载图片适配问题

[blackomilk]

业务逻辑是，每张图片模块有个模糊底层背景，然后在上边又加了一层懒加载图片，做出类似卡片的效果，但是底层的懒加载图片就可以100%占满父元素，上层的图片父元素是绝对定位，为啥上层的懒加载图片就占不满父元素呢，宽高比跟底层父元素宽高比是一致呢呀，求大神来给看看。 上层图片父元素绝对定位代码 position: absolute; top: 20rem; right: 20rem; bottom: 20rem; left: 20rem;

[heikaimu]

懒加载组件用的哪个？

[blackomilk]

懒加载组件用的哪个？

<LazyImg
:url="url + item.img_url"
v-on:contextmenu="preventContextMenu"
ref="lazyImg"
@success="lazyImgLoadSuccess1"
/>

[blackomilk]

懒加载组件用的哪个？

懒加载图片我看有个padding-bottom，最大值是200吗

[heikaimu]

你左边那个红色的正方形图片，我看是铺满了的，你有检查过没铺满的卡片的模糊图和清晰图片是一个比例吗？

[heikaimu]

loadProps: {
loading,
error,
ratioCalculator: (width, height) => {
// 我设置了最小宽高比
const minRatio = 3 / 4;
const maxRatio = 4 / 3;
// 获取当前图片的比例
const curRatio = width / height;
// 如果当前图片比列不在此范围内，我们取最小或者最大值
if (curRatio < minRatio) {
return minRatio;
} else if (curRatio > maxRatio) {
return maxRatio;
} else {
return curRatio;
}
}
}

[blackomilk]

你左边那个红色的正方形图片，我看是铺满了的，你有检查过没铺满的卡片的模糊图和清晰图片是一个比例吗？

这种图片宽高比是1:1，这种的没问题，就是那种竖图有问题，竖图宽高是1:2的。 就是不明白为啥底图能铺满，在上边盖一层，同样的图片为啥铺不满了呢。我就看到懒加载图片那个标签上有个padding-bottom,感觉是这个引起的

[heikaimu]

emmm....我知道原因了。这是一个数学问题。
100x100的时候，你给了一个20的边距。这时候你除开边距剩下80x80，他还是1:1
100x200的时候，你给了一个20，那么就变成80x180，当然不是1:2咯

[blackomilk]

emmm....我知道原因了。这是一个数学问题。 100x100的时候，你给了一个20的边距。这时候你除开边距剩下80x80，他还是1:1 100x200的时候，你给了一个20，那么就变成80x180，当然不是1:2咯

没想到这。。。这种情况有啥好的处理办法吗，间距还必须保留

[heikaimu]

  <style>
    .card {
      position: relative;
      
      &__bg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }

      &__img {
        position: relative;
        z-index: 2;
        padding: 20rem;
      }
    }
  </style>

<div class="card">
  <div class="card__bg">
    <lazyImg/>
  </div>
  <div class="card__img">
    <lazyImg/>
  </div>
</div>

这种结构试试。

[heikaimu]

其实，你这个没必要用2张图的。你的背景图就用的你主图然后给个高斯模糊的滤镜就行了。这样还能少加载一倍的资源。你在lazyImage加载成功的事件里面给你背景图赋地址就行了。

[blackomilk]

好的，我试试，感谢

[junqiang1992]

@blackomilk 你这个照片显示的样式可以提供下吗