如何绑定图片比例

[starinskycc]

你好，我测试了用 :style="{ aspectRatio: item.height && item.with ? item.with / item.height : '' }" 是不生效的，因为我的接口中会返回图片宽高，自定义比例的话，可以防止列表抖动。

[heikaimu]

这里我建议你用padding的方式来设置外容器。 代码大概是这样

    <div class="ratio-image ratio-image--3-of-5">
                  <div class="ratio-image__box cover">
                    <img class="ratio-image__source" src="./images/banner-2.jpg" alt="" />
                  </div>
                </div>

.ratio-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  box-sizing: border-box;
  position: relative;

  &--1-of-2,
  &--2-of-4 {
    padding-bottom: 50%;
  }

  &--1-of-3 {
    padding-bottom: 33.33%;
  }

  &--2-of-3 {
    padding-bottom: 66.66%;
  }

  &--1-of-4 {
    padding-bottom: 25%;
  }

  &--3-of-4 {
    padding-bottom: 75%;
  }

  &--1-of-5 {
    padding-bottom: 20%;
  }

  &--2-of-5 {
    padding-bottom: 40%;
  }

  &--3-of-5 {
    padding-bottom: 60%;
  }

  &--4-of-5 {
    padding-bottom: 80%;
  }

  &__box {
    @include absolute;
  }

  &__source {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

大概就这么个意思，img标签换成lazyImg就行了

[starinskycc]

好的

[starinskycc]

仔细检查了一下，是item.with打错了，放到上层的div上面就可以了，多谢回复。

[heikaimu]

嗯嗯，客气了。