缩放图像时避免滞后

Question

我有这个问题，当我使用transform：scale（）;属性在CSS中进行缩放时，我的图像非常卑鄙。我将图片从0到1缩放。

我的图片缩小了很多尺寸，因此我认为问题可能不会来自这里。

这是一个实际问题的视频： lag image视频

这是html：

<div class="picture-container first-part">
          <div
            class="picture-frame first-part"
            :style="{
              width: pictureFrameWidth + '%',
              height: pictureFrameHeight + 'vh',
            }"
          >
            <img
              src="../assets/pictures/cathedrale.jpg"
              alt="picture of Notre Dame de Reims"
              class="picture top-left"
              id="firstPic"
              :style="{ transform: 'scale(' + pictureScale + ')' }"
            />
          </div>
        </div>

CSS：

.picture-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  justify-self: center;
  align-items: center;

  width: 40%;
  height: 100vh;
}
.picture-container.first-part {
  position: sticky;

  top: 0px;
}
.picture-frame {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  padding: 5%;

  border: solid 1px var(--color);
}
.picture {
  z-index: 1;
  width: 100%;
  height: 100%;
}

JS：

constrain(n, high, low) {
      return Math.max(Math.min(n, high), low);
    },
resizePicture() {
  this.pictureScale = window.scrollY / 1500 - 0.75;
      let constrainedPictureScale = this.constrain(this.pictureScale, 1, 0);
      this.pictureScale = constrainedPictureScale;
}

我在用户滚动时调用resizePicture（）函数。

因此，如果您对如何以不同的方式进行优化或这样做有任何了解，那么我只是不希望这个滞后。